CODEWITHSUNDEEP
javascriptjquery
ashwin karki
ashwin karki

Reputation: 673

How to store value of checked item in arrayList using javascript/jquery?

Before I had used the class for getting the value of checked checkbox storing in array.

<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id" type="checkbox"
         value=1 class="chk" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id" type="checkbox"
         value=2 class="chk" /> <span>Packing List</span>
      </label>
   </div>
</div>

And it was successfully stored in array as :

$(".chk").click(function() {
         getValueUsingClass();
    });

    function getValueUsingClass(){
        $(':checkbox:checked').each(function(i){
            chkArray[i] = $(this).val();
        });
    }

It was working fine until i changed the class name from .chk1 and .chk2. So I needed to change the class to chk1 and chk2 

<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id" type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id" type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
   </div>
</div>

There may be more than these 2 checkboxes(I have only shown 2 as it is dynamic) there may be checkbox from .chk1 to .chk15 .How can i store checked checkbox in array when their class name is different?

Upvotes: 0

Views: 631

Answers (4)

ecstatic
ecstatic

Reputation: 114

you can achieve this without any class name:

function getValueUsingClass(){
    $('input[type="checkbox"]:checked').each(function(i){
        chkArray[i] = $(this).val();
    });
}

Upvotes: 0

Kaushik
Kaushik

Reputation: 2090

Try using the Starts with from jQuery Starts with selector.

You can use this as $(input[class^='chk'])

$('input[class^="chk"]').click(function() {
  var arr = getValueUsingClass();
  console.log(arr);
});

function getValueUsingClass() {
  var chkArray = [];
  $('input[class^="chk"]:checkbox:checked').each(function(i) {
    chkArray[i] = $(this).val();
  });
  return chkArray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="form-check">
  <div class="form-group">
    <label> <input  type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
    <label> <input  type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
  </div>
</div>

Upvotes: 1

Mamun
Mamun

Reputation: 68933

You can use jQuery's Attribute Starts With Selector that selects elements that have the specified attribute with a value beginning exactly with a given string.

Please Note: The attribute id must be unique in a document.

$("input[class^=chk]").click(function() {
   getValueUsingClass();
});

function getValueUsingClass(){
  var chkArray = [];
  $(':checkbox:checked').each(function(i){
      chkArray.push($(this).val());
  });
  console.log(chkArray);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id1" type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id2" type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
   </div>
</div>

Upvotes: 1

Tejas Gajjar
Tejas Gajjar

Reputation: 248

Try this code 

$("input[class^=chk]").click(function() {
   
   $('#result').html(getValueUsingClass().join(" | "));
});

function getValueUsingClass(){

  
  var arr = [];
           $(':checkbox:checked').each(function(){
              arr.push($(this).val());
           });
           return arr; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
   <div class="form-group">
      <label> <input id="check_id1" type="checkbox"
         value=1 class="chk1" /> <span>Invoice</span>
      </label>
      <label> <input id="check_id2" type="checkbox"
         value=2 class="chk2" /> <span>Packing List</span>
      </label>
   </div>
</div><div id="result"></div>

Please let me know your views over it.

Upvotes: 2

Related Questions