Question

i have a form with a “Select All” button and a bunch of checkboxes. i want to have it select all checkboxes when the user clicks the “Select All” button.

is there elegant way in jquery to do this?

EDIT #2: i have isolated the problem down to this code; style=”display: none;”. if i remove this code it works fine. any ideas?

EDIT: The answers below work in my test form but the button in this case is inside of a form that is inside of a div that only shows up as part of a simpledialog.show(). in this case, for some reason when i click on the button i dont see anything happen:

javascript:

<script type="text/javascript">
$(document).ready(function() {
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function() {
            $('#checkboxStatus').html('');
        },
        close: function() {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function() {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('&nbsp;&nbsp;Checked <b>' + c.join(', ') + '</b>.').show();
        }
    });

});

<script type="text/javascript">
$(function() {
$('#selectAll').click(function() {
        var select_all = (this.value === 'Select All');
        $(':checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';
    });
});

body:

<div style="display: none;" class="scrollableDiv" id="simpleDialog3">
    <h3>DEMO3</h3>
    <form id="checkboxForm">
    <input type="button" id="selectAll" value="TT" />
    <input type="checkbox" class="chckbx" value="1" /><br />
    <input type="checkbox" class="chckbx" value="1" /><br />
    </form>
    <p>
        <a href="#" class="close">Close</a></p>
</div>

any idea why it wouldn’t work in this case?

Answer 1

$(function(){
    $('#myButton').click(function(){
        var select_all = (this.value === 'Select All');
        $('input:checkbox').attr('checked', select_all);
        this.value = (select_all) ? 'Deselect All' : 'Select All';        
    });
});

Try placing this code before your dialog instantiation.

It seems like you may want to switch to jQuery UI Dialog.