Question

I have a checkboxlist in Popup. I used a selectall checkboxlist items function in jquery. The problem is when I check selectall checkbox , it selects all the checkboxlist items in popup and also in the webpage . how to make it select only the checkboxlist items only in the popup.. My code as

 <td>   <div style="text-align: left; margin: auto;">
                    <asp:CheckBox ID="chkSelectReportAll" runat="server" Text="Select All" onclick="checkall()"/>
                    <asp:CheckBoxList ID="chkReportLst" runat="server">
                    </asp:CheckBoxList>
        </div>
 </td>

My script as

function checkall() {
   $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').click(
    function () {
     if (document.getElementById('chkReportLst'))                    
   $("INPUT[type='checkbox']").attr('checked', $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));
            });
        } 

Any suggestions ??

Answer 1

Assign an ID to your <div>, that way you can narrow your selector to just the inputs inside it.

<div id="cntCheckBoxList" style="text-align: left; margin: auto;">
    <asp:CheckBox ID="chkSelectReportAll" runat="server" Text="Select All" onclick="checkall()"/>
    <asp:CheckBoxList ID="chkReportLst" runat="server"></asp:CheckBoxList>
</div> 

And the selector becomes:

$("#cntCheckBoxList INPUT[type='checkbox']").attr('checked',    $('#MainContent_uscOptionsPOPUP_chkSelectReportAll').is(':checked'));