How to make an array of items which are checked in checkbox

Question

I have some 20 check boxes ( dynamic number) in a HTML page which is checked by default. A user can uncheck it or leave it checked. At the end, there is a button to submit.

How to get the items that are only checked at the time of submitting?

`var arr = $('YourCheckBoxSelector').filter(":checked").map(function () { return this.value; }).get(); ` — Satpal, Jul 17 '18 at 12:06
https://github.com/marioizquierdo/jquery.serializeJSON - This will might help you out for all input types. — Gopal Garva, Jul 17 '18 at 12:08

Sam Holmes · Accepted Answer · 2018-07-17T12:27:28.113

2

For a plain javascript solution, you can use document.querySelectorAll().

Retrieve the checkboxes and then loop over them, then push() all of the ones that have the checked: true property to an array called checked.

var checkboxes = document.querySelectorAll("input[type=checkbox]");
var submit = document.getElementById("submit");

function getChecked() {
  var checked = [];

  for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    if (checkbox.checked) checked.push(checkbox.value);
  }

  return checked;
}

submit.addEventListener("click", function() {
  var checked = getChecked();
  console.log(checked);
});

<input type="checkbox" value="first" checked>
<input type="checkbox" value="second" checked>
<input type="checkbox" value="third" checked>

<input type="submit" id="submit">

edited Jul 17 '18 at 12:27

answered Jul 17 '18 at 12:10

Sam Holmes

1,594
13
31

how to it after all necessary checking and un checking ? – qwww Jul 17 '18 at 12:11
Updated to include a submit button! – Sam Holmes Jul 17 '18 at 12:14
so how to fetch the value attributes only, instead of tag – qwww Jul 17 '18 at 12:15
Updated to only `.push()` the `checkbox.value` into the `checked` array – Sam Holmes Jul 17 '18 at 12:17
Though the answer is perfectly correct, it'd be more cleaner if we use the javascript the better way. 1. Get List of checked input fields: `let checkboxes = [].slice.call(document.querySelectorAll("input[type=checkbox]:checked"))` 2. Get array of values: `let values = checkboxes.map(item => item.value)` I'd encourage you guys to play with these things. – Yubaraj Shrestha Jul 17 '18 at 13:01
Provided you don't need to support – Sam Holmes Jul 17 '18 at 13:03

score 0 · Answer 2 · answered Jul 17 '18 at 12:11

Get all check boxes by css Class and iterate to checked the condition element.checked on it

Check this code snippet

function checkCheckBoxes(){
$("input.abc").each(function(index, element){
  if(!element.checked){
   console.log(index+" not checked");
  } else{
  console.log(index+" checked");
  }
});
return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
<input type="checkbox"  class="abc"/>
  <input type="submit"  onclick="return checkCheckBoxes()" value="Submit">
</form>

How to make an array of items which are checked in checkbox

2 Answers2