CODEWITHSUNDEEP
javascriptjqueryasp.net
drobison
drobison

Reputation: 908

Dynamic JavaScript Select All CheckBoxList

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 %>')

Upvotes: 0

Views: 4374

Answers (4)

drobison
drobison

Reputation: 908

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>

Upvotes: 0

Adrian J. Moreno
Adrian J. Moreno

Reputation: 14859

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);
    });

});

Upvotes: 1

Manoj Yadav
Manoj Yadav

Reputation: 6612

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);
        }
    });
});

Upvotes: 1

Blender
Blender

Reputation: 298146

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);
});

Upvotes: 2

Related Questions