JQUERY: get the id's of the checked and not checked checkBox

Question

I have this not so many checkboxes:

<input type="checkbox" id="mango" value="mango" /> <label>MANGO</label><br>
<input type="checkbox" id="santol" value="santol" /> <label>SANTOL</label><br>
<input type="checkbox" id="guava" value="guava" /> <label>GUAVA</label><br>
<input type="checkbox" id="lomboy" value="lomboy" /> <label>LOMBOY</label><br>
<input type="checkbox" id="apple" value="apple" /> <label>APPLE</label><br>
<input type="checkbox" id="orange" value="orange" /> <label>ORANGE</label><br>
 ...................<>

Now, what I'm trying to do is get all the ID's of check boxes with check, and no check and put in an array. Something like this:

"fruitsGranted":["apple","lomboy","orange"]; //check is true
"fruitsDenied":["mango","santol","guava"];  //check false

can please someone show me how to do it.? thanks.

James Montagne · Accepted Answer · 2012-12-07T14:37:24.223

52

var someObj={};
someObj.fruitsGranted=[];
someObj.fruitsDenied=[];

$("input:checkbox").each(function(){
    var $this = $(this);

    if($this.is(":checked")){
        someObj.fruitsGranted.push($this.attr("id"));
    }else{
        someObj.fruitsDenied.push($this.attr("id"));
    }
});

http://jsfiddle.net/UqrYJ/

edited Dec 07 '12 at 14:37

answered Aug 01 '11 at 16:13

James Montagne

77,516
14
110
130

how can I alert `fruitsGranted` and `fruitsDenied`? – jayAnn Aug 01 '11 at 16:19
`alert(someObj.fruitGranted);` You don't need to have it in an object like that, it's just that your markup made it seem like you wanted an object. – James Montagne Aug 01 '11 at 16:21
@jayAnn: `alert ( someObj.fruitsGranted.join(",") );` – naveen Aug 01 '11 at 16:23
Added a fiddle to the answer. – James Montagne Aug 01 '11 at 16:23
@naveen the join is unneeded, alerting an array joins it anyway (unless some browsers don't) – James Montagne Aug 01 '11 at 16:26
is there any way to make it like an array, like this `["apple","lomboy","orange"]`? – jayAnn Aug 01 '11 at 16:27
It **IS** an array. If you want to make a string that looks like that then you could join the array and append the ends on. Something like: `'["' + someObj.fruitsGranted.join('","') + '"]'`. Untested, but that should work for all but the empty case. – James Montagne Aug 01 '11 at 16:29
why not using .map() method? see my answer below – Mo Valipour Aug 01 '11 at 16:53
@JamesMontagne I have a doubt.what does this statement means `var someObj={};` – Techy May 12 '14 at 06:08
1

@Techy `{}` is an empty object. – James Montagne May 12 '14 at 14:46

score 31 · Answer 2 · answered Aug 01 '11 at 16:49

31

I think I got a shorter version here:

var idSelector = function() { return this.id; };
var fruitsGranted = $(":checkbox:checked").map(idSelector).get();
var fruitsDenied = $(":checkbox:not(:checked)").map(idSelector).get();

You can see it in action here: http://jsfiddle.net/XPMjK/3/

answered Aug 01 '11 at 16:49

Mo Valipour

13,286
12
61
87

what is the requirement of get() function call here, it seems $(":checkbox:checked").map(idSelector) could do the job itself? – TechnicalSmile Jan 16 '16 at 15:29
1

`.get()` converts a jquery array to a native array. I guess you could live without it too. -- you can testify the difference by calling a jquery function (e.g. `.find()`) on the outcome and you can see the difference – Mo Valipour Jan 16 '16 at 17:44

John Kalberer · Answer 3 · 2011-08-01T16:36:02.250

5

I would do this something like this:

var all, checked, notChecked;
all = $("input:checkbox");
checked = all.filter(":checked");
notChecked = all.not(":checked)");

After that you can use jQuery.map to get the ids of each collection.

var checkedIds = checked.map(function() {
    return this.id;
});

var notCheckedIds = notChecked.map(function() {
    return this.id;
});

edited Aug 01 '11 at 16:36

answered Aug 01 '11 at 16:13

John Kalberer

5,690
1
23
27

2

The `is()` function should be changed to the `filter()` function. The `is()` function returns boolean value. – Sanghyun Lee Aug 01 '11 at 16:26

karim79 · Answer 4 · 2011-08-01T16:43:03.167

2

This can be done using .map, though in this case it is not really different from using .each:

$(":checkbox").change(function() {
    var notChecked = [], checked = [];
    $(":checkbox").map(function() {
        this.checked ? checked.push(this.id) : notChecked.push(this.id);
    });
    alert("checked: " + checked);
    alert("not checked: " + notChecked);
});

You can test it here.

edited Aug 01 '11 at 16:43

answered Aug 01 '11 at 16:12

karim79

339,989
67
413
406

JQUERY: get the id's of the checked and not checked checkBox

4 Answers4

Linked