Select all checkboxlist in Popup using jquery

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 ??

Answers


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

It certainly is but before doing it you will have to add class="popupCheckbox" in checkboxes inside your popup

jQuery 1.6+

Use the new .prop() function:

$(".popupCheckbox").prop("checked", true);
$(".popupCheckbox").prop("checked", false);
jQuery 1.5 and below

The .prop() function is not available, so you need to use .attr().

To check the checkbox (by setting the value of the checked attribute) do

$('.popupCheckbox').attr('checked','checked')

and for un-checking (by removing the attribute entirely) do

$('.popupCheckbox').removeAttr('checked')

Change this line

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

To

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

Replace #any_parent_in_popup with any parent elements ID which is inside popup, and contain all the checkboxes. If you dont have any, You can consider adding one.


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

The problem for you at the moment is that when you are selecting checkboxes with $("INPUT[type='checkbox']"), jQuery is looking at all checkboxes on the entire page, as you mentioned.

What you want is all checkboxes which belong to chkReportLst.

For readability, I tend to do this as a jQquery sub-selector, using the .find() function.

So, first select your checkboxlist, and then use .find() to select checkboxes which are child elements of that list:

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


Need Your Help

Convert from remote hosted SVN to GIT

git tortoisesvn

I have SVN hosted and want to convert to Git and put it back into the hosted repository as Git.

Crossfade animation on css text background-clip (webkit)

css webkit css-transitions

I'm using this code to overlay the background image onto h2 (leaving a white background):