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

Question

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?

you can try using the class starts with. $(input[class^='chk']) — Kaushik
– Kaushik, Commented Dec 27, 2018 at 9:34
my suggestion will be to have a common class name for js/jquery selection and rest for css. for example: class="chk chk1" and class="chk chk2" and rest all to be the same. — Ashish Kumar
– Ashish Kumar, Commented Dec 27, 2018 at 9:41

Tejas Gajjar · Accepted Answer · 2018-12-27 09:43:50Z

2

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.

answered Dec 27, 2018 at 9:43

Tejas Gajjar

2481 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kaushik · Accepted Answer · 2018-12-27 09:50:52Z

1

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>

edited Dec 27, 2018 at 9:50

answered Dec 27, 2018 at 9:35

Kaushik

2,0901 gold badge24 silver badges32 bronze badges

Comments

Mamun · Accepted Answer · 2018-12-27 09:46:09Z

1

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>

edited Dec 27, 2018 at 9:46

answered Dec 27, 2018 at 9:35

Mamun

69k9 gold badges51 silver badges62 bronze badges

2 Comments

ashwin karki Over a year ago

does id affects in the code? i have the same id for both of them and i am geting [1,1,2] in array in console

Mamun Over a year ago

@ashwinkarki, id must be unique in a document....there is no relation with that, I simply changed that as this not valid.....

ecstatic · Accepted Answer · 2018-12-27 09:52:15Z

0

you can achieve this without any class name:

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

answered Dec 27, 2018 at 9:52

ecstatic

1142 silver badges9 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related