How to get all the value of checked checkboxes using jquery/javascript?

Question

When my page opens then all the checkboxes are checked by default and while submitting the form, I am not able to get the value of the checked checkboxes in a array. The user may not click the checkboxes as it is by default all checked. So I tried to receive the checked value using:

var valores = (function() {
    var valor = [];
    $('input.className[type=checkbox]').each(function() {
        if (this.checked)
            valor.push($(this).val());
    });
    return valor;

})();

console.log(valores);

My codes for the checkboxes is:

<div class="form-group" id="documents">
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
</div>

You can use `map()` to build your array of checked values. See the duplicate for more information — Rory McCrossan, Jan 25 '19 at 09:28

Mamun · Accepted Answer · 2019-01-25T10:06:06.240

1

You can simply use jQuery's .map() and .get() on all the checked check boxes:

$("label > span:contains('OTHERS')").prev().prop('checked', false);

var valor = $('input[type=checkbox]:checked').map(function(){
  return this.value;
 }).get();
console.log(valor);

$("label > span:contains('OTHERS')").prev().change(function(){
  if(!this.checked) alert('Others unchecked');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="documents">
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom:5px"></div>
</div>

edited Jan 25 '19 at 10:06

answered Jan 25 '19 at 09:34

Mamun

66,969
9
47
59

@ashwinkarki, you are most welcome:) – Mamun Jan 25 '19 at 09:41
how can i make checkbox OTHERS unchecked when page is loaded ? is there any way? – ashwin karki Jan 25 '19 at 09:41
thnk u so much you saced my day – ashwin karki Jan 25 '19 at 09:47
@ashwinkarki, you are most welcome:) – Mamun Jan 25 '19 at 09:48
sir,but if OTHERS is checked(when unchecked OTHERS is clicked),then can i make a alert call inside a function?? – ashwin karki Jan 25 '19 at 09:52
@ashwinkarki, you can check the value of the check box on `change` event, if value is not checked show the alert....updated the answer....plz check. – Mamun Jan 25 '19 at 09:58
1

its woking have a gud day thank you so much @mamun – ashwin karki Jan 25 '19 at 10:02

How to get all the value of checked checkboxes using jquery/javascript?

1 Answers1