Getting checkbox checked or not in a array in jquery

Question

<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

I want to get the checked and not checked check boxes in a array. Please refer the sample output array below.

Array
(
    [0] => 1 //mark_box0 is checked
    [1] => 0 //mark_box1 is not checked
    [2] => 1 //mark_box2 is checked
)

I tried some code but not working correctly

var is_checked = $("input[name='mark_box[]']").map(function(){return this.value;}).get();

above code returns below array whenever checked or not

Array
(
    [0] => on
    [1] => on
    [2] => on
)

var is_checked = $("input[name=mark_box]:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

Please help me to do this.

score 2 · Answer 1 · answered Nov 20 '17 at 08:56

2

The way you are using is correct but you are getting the value which will remain same at every state. You have to check that the checkbox is checked or not. Here is the code:

var is_checked = $("input[name='mark_box[]']").map(function(){
       return $(this).attr("checked");
}).get();

Let me know if you have any query.

answered Nov 20 '17 at 08:56

Code Lღver

15,573
16
56
75

Depending on the jQuery version `prop("checked")` may be preferable to `attr("checked")` – apokryfos Nov 20 '17 at 08:57
@apokryfos I agree with you. I also thinking that there should be `prop` function. Thanks. – Code Lღver Nov 20 '17 at 08:58

score 1 · Accepted Answer · answered Nov 20 '17 at 08:54

The value attribute return value of input. You should use checked that return status of checkbox.

var is_checked = $("input[name='mark_box[]']").map(function(){
  return this.checked ? 1 : 0;
}).get();

var is_checked = $("input[name='mark_box[]']").map(function(){
  return this.checked ? 1 : 0;
}).get(); 
console.log(is_checked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

score 1 · Answer 3 · answered Nov 20 '17 at 08:58

You need to check for checked and not value

$(".button").click(function() {
  var checkedArray = $("input[name='mark_box[]']").map(function() {
    return this.checked;
  }).get();
  console.log(checkedArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">
<button class='button'>Submit</button>

score 1 · Answer 4 · answered Nov 20 '17 at 09:01

You are almost there.

Instead of using

var is_checked = $("input[name=mark_box]:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

Use

var is_checked = $("input['name=mark_box[]']:checked").map(function() {
     return this.value;
 }).get().join(","));  // returns empty array

(Note the []).

With the :checked selector, you don't need to loop all the inputs. It will give you all the checked elements automatically.

So $("input[name='mark_box[]']:checked") returns all the checked checkboxes.

$(function() {
  var checkedArr = $("input[name='mark_box[]']:checked");
  
  /*for the output:*/
  var print = $("input[name='mark_box[]']:checked").map(function() { 
   return $(this).attr('id');}).get().join(",");
  console.log( print );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]" />
<input type="checkbox" id="mark_box1" name="mark_box[]" checked />
<input type="checkbox" id="mark_box2" name="mark_box[]" />
<input type="checkbox" id="mark_box3" name="mark_box[]" checked />
<input type="checkbox" id="mark_box4" name="mark_box[]" checked />

score 0 · Answer 5 · answered Nov 20 '17 at 09:01

I think you need something like below

function getValues(){
var array = [];
$("input:checkbox[name='mark_box[]']").each(function(){
    array.push($(this).prop('checked') ? 1 : 0);
});
console.log(array);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="mark_box0" name="mark_box[]">
<input type="checkbox" id="mark_box1" name="mark_box[]">
<input type="checkbox" id="mark_box2" name="mark_box[]">

<button type="button" onclick="getValues()">Run</button>

Getting checkbox checked or not in a array in jquery

5 Answers5