views:

150

answers:

3

On page load, using jQuery how can I select all check boxes in a specific div automatically?

+4  A: 
$(function(){
    $('#thediv input:checkbox').attr('checked', 'checked');
});
redsquare
+1  A: 

What redquare has will work, but it's a better idea overall to use true/false with these since that's how they're normalized, here are a few examples of why this is a handy habit to follow. For example:

$('#myDiv :checkbox').attr('checked', 'checked');
alert($('#myDiv :checkbox').attr('checked')); //this alerts true, not "checked"

You can test this here

Instead, get in the habit of passing a boolean, which is a lot more versatile, for example:

$(function() {
    $('#myDiv :checkbox').attr('checked', true);
});

This allows a lot more flexibility in more terse code, for example, say we had a "Check All" checkbox on the top, how would that look?

$('#checkAll').change(function() {
  if(this.checked) {
    $('#subTable :checkbox').attr('checked', 'checked');
  } else {
    $('#subTable :checkbox').removeAttr('checked', 'checked');
  }
});

Now we've had to bring a new function in to do the work, .removeAttr(). To be fair, this is even how the jQuery documentation does it in the example. But, you can cut that down greatly if you take advantage of the normalization jQuery does internally, like this:

$('#checkAll').change(function() {
  $('#subTable :checkbox').attr('checked', this.checked);
});

This is just something to keep in mind as you code, the same rules appy to .attr('disabled'). There are other areas that normalization occurs as well...probably events being the most extensive of them, if you're curious you can see that here, it's already done for you, use it :)

Nick Craver
I know I'm a broken record on this, but really, the `checked` property of the checkbox element is by far the easiest and most natural thing to use. Same goes for `disabled`.
Tim Down
@Tim - And what's what is being used :) However *setting* the property on **multiple** elements isn't easily done in a terse way, you'd have to do a manual `.each()` call in all of your code for that. You can do `.checked = true;` on a *collection* :)
Nick Craver
I know, I know. I did that in my answer. I'd still rather recommend using `each()` and the `checked` property though: there now exists needless confusion in many developers' minds over something extremely simple thanks to the unfortunately-named `attr()` function (that usually sets properties, not attributes) and the multiple uncertain and tortuous ways people now recommend for setting a simple Boolean flag that's existed and worked happily for a decade and a half.
Tim Down
@Tim - I see your point, but when it comes down to it, [jQuery is doing](http://github.com/jquery/jquery/blob/master/src/attributes.js#L288) `elem['checked'] = true;` in the method above. Yes there's some overhead, comes down to a matter of preference I suppose...this is a very small time/CPU cost in either case, personally I will take the more terse approach in those situations. If for some reason I have enough checkboxes for it to matter...and I think there's a form problem at that point, then I'd opt for a `.each()` approach :)
Nick Craver
Fair enough. You know what you're doing so are equipped to make a thoughtful choice. I'm attempting to simplify things for developers who may not be. My objection to using `attr()` here is less to do with performance than using the appropriate tool for the job. The property/attribute confusion that jQuery has almost single-handedly been responsible for is unnecessary and annoying. It perpetuates the myth that DOM is hard and therefore we should all be using jQuery, whereas the truth is that in this case jQuery itself is making an easy task harder.
Tim Down
Thanks for the detailed response and advice, Nick. It is appreciated.
sevens
Why has this got a downvote? It's better than the accepted answer. We've been visited by an asshat.
Tim Down
+2  A: 

People seem genuinely confused about how to do this in jQuery. Checking a checkbox is much easier and more efficient without it. The following uses jQuery's strengths of selecting and iterating over a list of nodes combined with the couldn't-be-simpler DOM checked property of checkbox elements:

$("#myDiv input:checkbox").each(function() {
    this.checked = true;
});

It's not too hard to cut out jQuery altogether in this case:

var div = document.getElementById("theDiv");
var inputs = div.getElementsByTagName("input");
for (var i = 0, len = inputs.length; i < len; ++i) {
    if (inputs[i].type == "checkbox") {
        inputs[i].checked = true;
    }
}
Tim Down
Wow, another downvote without a comment. Please don't do that, it's rude.
Tim Down