Dynamic JavaScript Select All CheckBoxList

Question

I have the following code to do select all on an ASP check box list:

    <script type="text/javascript">
        $(document).ready(function () {
            $('.myCheckBoxList :checkbox').eq(0).click(function () {
                var cbl = document.getElementById('<%=cbl_list1.ClientID %>').getElementsByTagName("input");
                // If Checked
                if (this.checked) {
                    for (i = 0; i < cbl.length; i++)
                        cbl[i].checked = true;
                }
                // If Unchecked
                else {
                    for (i = 0; i < cbl.length; i++)
                        cbl[i].checked = false;
                }
            });
        });
    </script>

        <asp:CheckBoxList ID="cbl_list1" runat="server" AppendDataBoundItems="true" CssClass="myCheckBoxList" >
            <asp:ListItem Text="Select All" Value="Select All" />
            <asp:ListItem Text="1" Value="1" />
            <asp:ListItem Text="2" Value="2" />
            <asp:ListItem Text="3" Value="3" />
        </asp:CheckBoxList>

I would like to add multiple check box lists that use the same code. How can I inherit the client id with out hardcoding it into the js (ie: getElementById('<%=cbl_list1.ClientID %>')

Blender · Accepted Answer · 2013-07-16 18:49:00Z

2

You can use this to refer to the current element, as you did in your code, and traverse to the other elements:

$('.myCheckBoxList :checkbox:first').click(function() {
    $(this).siblings().prop('checked', this.checked);
});

answered Jul 16, 2013 at 18:49

Blender

300k55 gold badges462 silver badges511 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drobison Over a year ago

Can't get this to work. It looks like the sibling of this is a label and not all the check boxes.

Manoj Yadav · Accepted Answer · 2013-07-16 19:06:12Z

1

For multiple check box lists you can use each function this way you don't need to use id. Then find it's checkbox elements using find and update them

Example:

$('.myCheckBoxList').each(function() {
    var el = $(this);
    el.find('input[type="checkbox"]:eq(0)').change(function() {
        if (el.prop('checked')) {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', true);
        } else {
            el.find('input[type="checkbox"]').not(':eq(0)').prop('checked', false);
        }
    });
});

edited Jul 16, 2013 at 19:06

answered Jul 16, 2013 at 18:57

Manoj Yadav

6,6121 gold badge25 silver badges21 bronze badges

Comments

Adrian J. Moreno · Accepted Answer · 2013-07-16 19:25:09Z

I've written a blog post on how to tackle "Check All Checkboxes". You want to use the property "checked", not the attribute "checked".

By using "data-" attributes and jQuery selectors, you can tie a group of checkboxes to a "select all" checkbox. You can then have as many groups like that as you want. This script also manages checking and un-checking the "select all" based on the state of the related group of checkboxes.

Loop over the group of checkboxes (#i# is your variable):

<input type="checkbox" id="foo_#i#" name="foo" value="#i#" data-select-all="sa_foo" class="checkme" />

The "select all" ("data-checkbox-name" specifies which named group it controls):

<input type="checkbox" id="sa_foo" name="sa_foo" data-checkbox-name="foo" class="selectall" />

The JavaScript:

$(document).ready(function(){

    $(':checkbox.selectall').on('click', function(){
        $(':checkbox[name=' + $(this).data('checkbox-name') + ']').prop("checked", $(this).prop("checked"));
    });
    // Individual checkboxes
    $(':checkbox.checkme').on('click', function(){ // 1

        var _this = $(this); // 2
        var _selectall = _this.prop("checked"); //3

        if ( _selectall ) { // 4
            // 5
            $( ':checkbox[name=' + _this.attr('name') + ']' ).each(function(i){
                // 6
                _selectall = $(this).prop("checked");
                return _selectall; // 7
            });

        }

        // 8
        $(':checkbox[name=' + $(this).data('select-all') + ']').prop("checked", _selectall);
    });

});

drobison · Accepted Answer · 2013-07-16 20:49:36Z

I was able to get this working with the help of a few of the suggestions here. Working code is:

       <script type="text/javascript">

            $(document).ready(function () {
                $('.myCheckBoxList').each(function () {
                    $(this).find('input[type=checkbox]:first').addClass("SelectAll");

                $('.SelectAll').click(function () {
                    // If Checked
                    if (this.checked) {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', true);
                    }
                        // If Unchecked
                    else {
                        $(this).closest('table').find('input[type=checkbox]').prop('checked', false);
                    }
                });
            });
    </script>

Collectives™ on Stack Overflow

Dynamic JavaScript Select All CheckBoxList

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related