Click events of Dynamically generated Checkboxes

Question

5.00/5 (1 vote)

See more:

Hello all. I am facing some strange issue with JQuery. Let me explain it in detail.

I got some data from DB and based on it i generated parent child checkboxes. I have single div on page. I generate one div for every parent child bunch and attach each of the genrated div to the div that is already on the page. So after doing all this, i got something similar to this one : Example image[Not actual one]

Now,see the image. I have similar layout.You can consider that Each fruits category with all the childs are under one div.

What i am trying is,Check all functionality. if i check Parent checkbox,all the children will get checked. Its working fine,the issue is its working only first time. If i uncheck and recheck again(parent),it doesnt checks all the children. I tried to debug it in browser. It shows checked in Browser,but in UI its unchecked.The code is as shown below:

C#

for (k = 0; k < ParentCount; k++) {
           $("#parentchk" + k).on('click', function () {
               if ($(this).is(':checked')) {//if parent is checked
                   $(this).parent().find('input:checkbox').each(function () {//get the Div for this bunch and loop through all the checkboxes
                       $(this).attr('checked', 'checked');
                   });
               }
               else {
                   $(this).parent().find('input:checkbox').each(function () {
                       $(this).removeAttr('checked');
                   });
               }
           });
       }

This code is under the function which dynamically generates the Checkboxes. I am unable to identify the cause of issue.

Anyone there who can identify? Let me know if you need more details or anything is still not clear.

Posted 3-Jun-14 23:09pm

Thanks7872

Updated 4-Jun-14 0:40am

v2

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 6:59am

Thanks for the question Rohan. Nicely explained. Now let me reproduce the issue at my end. :)

Thanks7872 4-Jun-14 7:36am

If you still need to play around with this one let me know. :-). I will give you the HTML.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 7:41am

Give me. :)

Thanks7872 4-Jun-14 7:48am

<div id="functions" style="clear: both; height: 250px; width: 950px;">
<div id="appended_div0" style="float: left;">
<input id="Parentchk0" value="3" class="parents" type="checkbox"><input id="Parentlbl0"
value="Center Of Excellence" type="label" style="font-size: 20px; border: none;"><br>
<input id="Childchk0" value="4" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl0" value="Pre sale" type="label" style="border: none;"><br>
<input id="Childchk7" value="14" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl7" value="Innovation" type="label" style="border: none;"><br>
<input id="Childchk8" value="15" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl8" value="Patenting" type="label" style="border: none;"><br>
<input id="Childchk9" value="16" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl9" value="Competency Development" type="label" style="border: none;"><br>
<input id="Childchk16" value="23" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl16" value="Project Managment" type="label" style="border: none;"><br>
</div>
<div id="appended_div1" style="float: left;">
<input id="Parentchk1" value="5" class="parents" type="checkbox"><input id="Parentlbl1"
value="Delivery" type="label" style="font-size: 20px; border: none;"><br>
<input id="Childchk1" value="8" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl1" value="Development" type="label" style="border: none;"><br>
<input id="Childchk2" value="9" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl2" value="Project Analysis" type="label" style="border: none;"><br>
<input id="Childchk3" value="10" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl3" value="Testing" type="label" style="border: none;"><br>
<input id="Childchk4" value="11" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl4" value="Design" type="label" style="border: none;"><br>
<input id="Childchk5" value="12" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl5" value="BPO" type="label" style="border: none;"><br>
<input id="Childchk6" value="13" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl6" value="Print Media" type="label" style="border: none;"><br>
</div>
<div id="appended_div2" style="float: left;">
<input id="Parentchk2" value="7" class="parents" type="checkbox"><input id="Parentlbl2"
value="Human Resource" type="label" style="font-size: 20px; border: none;"><br>
<input id="Childchk12" value="19" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl12" value="Recruitment" type="label" style="border: none;"><br>
<input id="Childchk13" value="20" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl13" value="Skill & Talent Pool Management" type="label" style="border: none;"><br>
<input id="Childchk14" value="21" class="childrens" type="checkbox" style="margin-left: 20px;"><input
id="Childlbl14" value="Salaries & Reimbursements" type="label" style="border: none;"><br>
<input id="Childchk15" value="22" class="ch

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 7:01am

Can you just give me the HTML of the Total Div, so that I can try this?

Thanks7872 4-Jun-14 7:10am

Hey Tadit. Thanks for the reply. This issue is resolved with the help of JQuery Genius :-). The big question is i dont know how? :-D. Let me post the snippet which i used as a replacement of the above one.

Thanks7872 4-Jun-14 7:12am

$(document).on("click", "INPUT[id^=parentchk]", function (event) {        
        var targetId = event.target.id;        
        var parentdvId = $(this).parent().attr('id');
        
        if ($("#" + targetId + ":checked").length > 0) {
            $("#" + parentdvId + " input:checkbox").each(function () {
                $("#" + parentdvId + " input:checkbox").prop("checked", true);
            });
        }
        else {
            $("#" + parentdvId + " input:checkbox").each(function () {
                $("#" + parentdvId + " input:checkbox").prop("checked", false);
            });
        }
    }); 
I can understand this code, but i am still not clear why the code in question is not working..Really.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 7:17am

Okay, good. Just add this as an answer. :)

Thanks7872 4-Jun-14 7:33am

I have never ever faced such TRAGEDY..:-D :-D :-D .This snippet is working as what i expected and i dont know how...:-D

Well, thanks again. I added as solution as you suggested.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 7:40am

Good. :) It happens sometimes. I can't test, otherwise I might got some interesting results. I am still interested to find the problem with that code, if you can provide me the HTML.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 8:19am

I got the problem and added one solution. See it and accept if you like it. :)

One more thing. Do you see all the fonts of this thread as different than the defauly CodeProject font? If so, then please report this in "Bugs and Suggestion".

Nelek 4-Jun-14 9:30am

There is somewhere a not correctly closed "code" tag, that's why all the text is weird

2 solutions

Solution 1

I solved it by replacing the code snippet with below one.

C#

$(document).on("click", "INPUT[id^=parentchk]", function (event) {
var targetId = event.target.id;
var parentdvId = $(this).parent().attr('id');

if ($("#" + targetId + ":checked").length > 0) {
$("#" + parentdvId + " input:checkbox").each(function () {
$("#" + parentdvId + " input:checkbox").prop("checked", true);
});
}
else {
$("#" + parentdvId + " input:checkbox").each(function () {
$("#" + parentdvId + " input:checkbox").prop("checked", false);
});
}
});

Posted 4-Jun-14 1:31am

Thanks7872

Comments

Nirav Prabtani 4-Jun-14 7:40am

Congrats.. :)

Nelek 4-Jun-14 7:47am

You forgot to indent your code ;P

Thanks7872 4-Jun-14 8:52am

Unfortunately i am not able to do it right now. I think this page has some bugs. Not sure. Do you see any changed fonts on whole page?

Nelek 4-Jun-14 9:20am

yes, there must be a "code" somewhere without a "/code" tag, that's why all the following text without "pre" tags get red and big

Nelek 4-Jun-14 9:21am

You should post your code snippets into question and/or answer, then delete the comments with snippets. Probably it get ride of the problem

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 9:31am

No, Nelek, it has some bugs I guess. Otherwise, how come all the page elements are affected?

Nelek 4-Jun-14 9:39am

It is not the first time I see it, in articles or questions. Not correctly closed html formatting tags can affect the layout of the rest of the page where they are.

If there is another html tag opening it gets priority, that's why the quote and the pre tags still work.

If you pay attention only the "no formatted" text is getting affected.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 9:43am

Yeah, correct... We can also search that. But ideally, it should affect the whole page, right? It should get restricted to only that text block where the issue is.

So, I suggested Rohan to add one Bug and he has done.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 9:45am

And I know where is the issue. Even I can correct that. But let admins to apply some fixes first so that the whole page does not get affected.

Nelek 4-Jun-14 10:01am

I have tried to find it, but couldn't. Where is it? I am curious now.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 10:07am

It was in Rohan's comment, where he pasted all the HTML code. Now somebody has removed the "code" tag, so everything is fine. But the problem was the last div in that code, which did not have the end ">" greater than character.

Nelek 4-Jun-14 10:12am

Good eye. I was sure it was there (I had seen the first code block when you suggested to post it as solution and was OK). But I couldn't find it on the fly.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Jun-14 10:15am

:D

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-06-04T02:16:00

I found the problem. In your first attempt, you are using attr() and removeAttr() methods.
Refer - Add attribute 'checked' on click jquery[^].

Quote:
In IE, this will always actually make the checkbox checked. In other browsers, if the user has already checked and unchecked the checkbox, setting the attribute will have no visible effect. Therefore, if you want to guarantee the checkbox is checked as well as having the checked attribute, you need to set the checked property as well:

Then in your next attempt, you corrected the code to deal with the checked property instead of attribute.

JavaScript

$("#" + parentdvId + " input:checkbox").prop("checked", true);

$("#" + parentdvId + " input:checkbox").prop("checked", false);

As I was debugging, suddenly it came to my mind that, when the code ran for the first time, it removed the attributes all together from the CheckBoxes, so how it would work next time. Then I researched more and find out that we should set the property instead of attribute.