jQuery：如何获取一组元素？

Question

I have a simle html div with a variable number of input checkboxes and i whould like to chek which chekbox is cheked and which isn't

HTML code:

<div>
    <input type="checkbox" val="1"/>Check One<br/>
    <input type="checkbox" val="2" checked="checked"/>Check Two<br/>
</div>

Javascript code:

var $kids = $("div").children("input");

for (var i = 0; i < $kids.length; i ++) {
    // if i alert($kids[i]); i get [object HTMLInputElement] how can i work with it?
    alert ($kids[i].val()); // doesn't work
}

In jQuery site i read children() method can "Get a set of elements containing all of the unique immediate children of each of the matched set of elements." but what is a "set of elements"and how can I work with it?

Answer 1

$("input:checkbox:checked") or $("input:checkbox:not(:checked)")

You should add an id to your container to limit the options...
<div id="container"> inputs here </div>

Then you can use...
var checked = $("#container input:checkbox:checked");
var unchecked = $("#container input:checkbox:not(:checked)");

Answer 2

EDIT :

I should have read your question more carefully you were asking how to iterate over the the set. as has already been stated you can do:

$('div input:checked').each(function(){
   // do something with the item this is always the current element in the iteration
});

or

$.each(yourVar, function(i, e){
   // your var can be anything iterable really... an object, an array i is the index and e is the value for that index
});

---

$('div input:checked'); should work.

Answer 3

Working with a set of elements is very similar to working with a single element in jQuery.. There are a lot of methods you can use to split the segments up .each() allows you to work with each matched element, .css() , .animate() , .show() etc all work with all the elements matched in the set as well. You can used .get() or just an array index [0] to get single elements out of the jQuery matched set.

Answer 4

• This selector will get you all the checkboxes: input:checkbox
• This selector will get you all the checkboxes that are checked: input:checkbox:checked
• This selector will get you all the checkboxes that are not checked: input:checkbox:not(:checked)

Answer 5

You can access the elements with $kids[i], but what you're getting back isn't a JQuery object, it's a standard DOM element. Therefore you can't call the .val() method, because that doesn't exist for DOM objects.

So really you only have to make a small modification:

var $kids = $("div").children("input");

for (var i = 0; i < $kids.length; i ++) {
    // if i alert($kids[i]); i get [object HTMLInputElement] how can i work with it?
    alert ($kids[i].checked); // does work :-)
}

Hope this helps!