ASP.NET Checkboxlist validation using Javascript

Question

I have a asp.net checkboxlist as follows:

<asp:CheckBoxList ID="cblCurrency" runat="server">
    <asp:ListItem Text="ALL" Value="0"></asp:ListItem>
    <asp:ListItem Text="A" Value="1"></asp:ListItem>
    <asp:ListItem Text="B" Value="2"></asp:ListItem>
    <asp:ListItem Text="C" Value="3"></asp:ListItem>
    <asp:ListItem Text="D" Value="4"></asp:ListItem>
</asp:CheckBoxList>

The requirement is such that if "ALL" is selected it should remove checked property from all other checkboxes and if any other checkbox is selected it should remove checked property of "ALL". I want to achieve this using javascript but most preferably in jQuery. Please reply if you know how to do it. Help would be appreciated.

Answer 1

Here's my solution:

$("#<%=cblCurrency.ClientID%> input").click(function () {
    if ($('<%= "#" + cblCurrency.ClientID + "_0" %>').is(":checked")) {
        $("#<%=cblCurrency.ClientID%> input:checkbox").not(this).prop("checked", false);
    }
});

Basically, we utilize the index of the check-box which is generated by ASP.NET and used in the ID attribute at the end. Like this one: cblCurrency_1 which means the check-box at index 1.

Answer 2

Try this:

Markup:

<asp:CheckBoxList ID="cblCurrency" runat="server" CssClass="CheckBoxList" ClientIDMode="Static">
    <asp:ListItem Text="ALL" Value="0"></asp:ListItem>
    <asp:ListItem Text="A" Value="1"></asp:ListItem>
    <asp:ListItem Text="B" Value="2"></asp:ListItem>
    <asp:ListItem Text="C" Value="3"></asp:ListItem>
    <asp:ListItem Text="D" Value="4"></asp:ListItem>
</asp:CheckBoxList>

JavaScript:

$(document).ready(function () {
    $(".CheckBoxList input:checkbox:first").change(function () {
        $(".CheckBoxList").find(':checkbox').prop("checked", this.checked);
    });

    $(".CheckBoxList input:checkbox:not(first)").change(function () {
        $(".CheckBoxList").find(':checkbox:first').prop("checked", this.checked);
    });
});

Answer 3

Create an event handler for managing clicks on all of the check boxes, and capture the user behavior you want.

If you take this code, and view source on the HTML that is rendered, we get:

    <table id="MainContent_cblCurrency">
    <tr>
        <td><input id="MainContent_cblCurrency_0" type="checkbox" name="ctl00$MainContent$cblCurrency$0" value="0" /><label for="MainContent_cblCurrency_0">ALL</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_1" type="checkbox" name="ctl00$MainContent$cblCurrency$1" value="1" /><label for="MainContent_cblCurrency_1">A</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_2" type="checkbox" name="ctl00$MainContent$cblCurrency$2" value="2" /><label for="MainContent_cblCurrency_2">B</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_3" type="checkbox" name="ctl00$MainContent$cblCurrency$3" value="3" /><label for="MainContent_cblCurrency_3">C</label></td>
    </tr><tr>
        <td><input id="MainContent_cblCurrency_4" type="checkbox" name="ctl00$MainContent$cblCurrency$4" value="4" /><label for="MainContent_cblCurrency_4">D</label></td>
    </tr>
</table>

It's not pretty, but it is what we have to work with.

This JS will capture the click of all the checkboxes. It locates the checkboxes based on the ID of the containing table. If it is the "all" checkbox is checked(based on the value of the checked input) it will uncheck all currently selected checkboxes:

$().ready(
        function () {
            $("#<%=cblCurrency.ClientID%> input").click( // The ClientID property should tell you that the ID if the table is  
                function () {
                    var eventSource = $(this); //The checkbox that was clicked
                    //for debugging Delete once you get working                    
                    //console.log(eventSource.val())
                    //console.log(eventSource.is(':checked'))

                    if (eventSource.val() == "0" && eventSource.is(':checked')) { // Make sure the value is what you expect and that the check box is being checked (and not unchecked)
                        $("#<%=cblCurrency.ClientID%> input").not(eventSource).prop('checked', false)// uncheck all other checkbox. exclude the input that is the source of the event.

                    }
                }
            )
        }
            );

A version of this is here: http://jsfiddle.net/RGW4Q/