Select all checkboxlist in Popup using jquery

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

why don't you mark answer accepted if you have got your answer. — RPB
– RPB, Commented Jun 14, 2012 at 12:46

mgnoonan · Accepted Answer · 2012-06-14 12:39:01Z

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

answered Jun 14, 2012 at 12:39

mgnoonan

7,2005 gold badges26 silver badges28 bronze badges

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

Comments

RPB · Accepted Answer · 2012-06-14 12:44:48Z

1

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

edited Jun 14, 2012 at 12:44

answered Jun 14, 2012 at 12:38

RPB

16.4k16 gold badges59 silver badges80 bronze badges

Comments

Prasenjit Kumar Nag · Accepted Answer · 2012-06-14 12:36:53Z

0

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.

answered Jun 14, 2012 at 12:36

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Comments

Roman · Accepted Answer · 2012-06-14 12:38:37Z

0

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

answered Jun 14, 2012 at 12:38

Roman

6,5582 gold badges32 silver badges51 bronze badges

Comments

mrmillsy · Accepted Answer · 2012-06-14 12:40:52Z

0

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

answered Jun 14, 2012 at 12:40

mrmillsy

4953 silver badges14 bronze badges

Collectives™ on Stack Overflow

Select all checkboxlist in Popup using jquery

5 Answers 5

Comments

jQuery 1.6+

jQuery 1.5 and below

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

jQuery 1.6+

jQuery 1.5 and below

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related