Question

I have several checkboxes spread across two divs. The two divs are contained in a div called actions.
In a separate div I have a ‘select all’ checkbox. When that checkbox is selected, I am trying to get all the other ones to be selected, and when you deselect the ‘select all’ one, it deselects the others.

This is the HTML:

<div class="actions" id="actions" title="Actions">
    <div>
        <div><input type="checkbox" name="action" class="act" value="0" /> <?php echo $lang["actions"][0]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="1" /> <?php echo $lang["actions"][1]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="2" /> <?php echo $lang["actions"][2]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="3" /> <?php echo $lang["actions"][3]; ?></div><br />

    </div>
    <div>
        <div><input type="checkbox" name="action" class="act" value="26" /> <?php echo $lang["actions"][26]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="27" /> <?php echo $lang["actions"][27]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="28" /> <?php echo $lang["actions"][28]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="29" /> <?php echo $lang["actions"][29]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="30" /> <?php echo $lang["actions"][30]; ?></div><br />
        <div><input type="checkbox" name="action" class="act" value="31" /> <?php echo $lang["actions"][31]; ?></div>
    </div>
</div>
<div class="parameters1">
    <div class="selectAll" title="Select All"><input type="checkbox" id="selectAll" name="selectall" /> Select All</div>
</div>

Here is my JQuery:

$(".selectAll").click(function() {
        var checked_status = this.checked;
        $('#actions').find("input").each(function() {
            $(this).attr(":checked", checked_status);
        });
});

If I put an alert() inside the each function, it is seeing every single check box correctly, however the $(this).attr bit does not seem to be actually changing the checkbox.

Any ideas?

Answer 1

You’re not setting the attribute properly:

    $(this).prop("checked", checked_status);

Starting with the 1.6 version of jQuery, “.prop()” is preferred over “.attr()” for this purpose, though for a boolean attribute/property like “checked” the “.attr()” function will still work. The attribute name does not need the “:” on the front, and in fact that will make the operation fail since the property you want to update is in fact called “checked”, without a “:”.

Also you don’t really need the explicit “.each()”; it should work fine to do:

    $('#actions input').prop('checked', checked_status);