Jquery - checkbox label click not working

Question

Here is the HTML Sample dynamically generated from c#.net:-

<ul class="multiselect-checkboxes clearfix horizontal" id="chkMC"><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices0-931336440" id="ctl03_ctl05_CheckboxChoices0-931336440"><label for="ctl03_ctl05_CheckboxChoices0-931336440">1-2 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices1-1671570667" id="ctl03_ctl05_CheckboxChoices1-1671570667"><label for="ctl03_ctl05_CheckboxChoices1-1671570667">5-10 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices2679786207" id="ctl03_ctl05_CheckboxChoices2679786207"><label for="ctl03_ctl05_CheckboxChoices2679786207">10-12 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices3-977631492" id="ctl03_ctl05_CheckboxChoices3-977631492"><label for="ctl03_ctl05_CheckboxChoices3-977631492">12-15 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices41547758987" id="ctl03_ctl05_CheckboxChoices41547758987"><label for="ctl03_ctl05_CheckboxChoices41547758987">15-20 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices5-1658326960" id="ctl03_ctl05_CheckboxChoices5-1658326960"><label for="ctl03_ctl05_CheckboxChoices5-1658326960">20-21 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices6-100787876" id="ctl03_ctl05_CheckboxChoices6-100787876"><label for="ctl03_ctl05_CheckboxChoices6-100787876">22-23 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices7122075492" id="ctl03_ctl05_CheckboxChoices7122075492"><label for="ctl03_ctl05_CheckboxChoices7122075492">23-24 Years</label></span></li><li onclick="setMcCb(event);"><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoices8-1742375481" id="ctl03_ctl05_CheckboxChoices8-1742375481"><label for="ctl03_ctl05_CheckboxChoices8-1742375481">More than that</label></span></li><li><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoicesOther" id="ctl03_ctl05_CheckboxChoicesOther"><label for="ctl03_ctl05_CheckboxChoicesOther">other</label></span>&nbsp;&nbsp;<input type="text" style="width: 150px;" class="QTextBox" id="ctl03_ctl05_otherText" name="ctl03$ctl05$otherText"></li><li><span class="QRadio"><input type="checkbox" name="ctl03$ctl05$CheckboxChoicesNA" id="ctl03_ctl05_CheckboxChoicesNA"><label for="ctl03_ctl05_CheckboxChoicesNA">plplpl</label></span></li></ul>

JS Method:-

function setMcCb(e) {  
                if (!e) var e = window.event;                             
                var tg = (window.event) ? e.srcElement : e.target;  //FF & IE.
                var j$chk = j$(tg).closest('li').find(':checkbox');

                if ( j$chk[0] != tg)                        
                    j$chk.attr('checked', !j$chk.attr('checked'));
                }

*Purpose of the JS Method:- I created this javascript when anyone clicks the checkbox, label or the li tag, the checkbox should toggle. *

*My Problem:- When i click the label element, the js is not working. The toggle is not happening. Please help me refine the js code. *

I made it work the following code:-

 if (!e) var e = window.event;                             
                    var tg = (window.event) ? e.srcElement : e.target;  //FF & IE.                    
                    //Label click does not toggle the cbx with this JS, so the below processing is skipped by returning false.
                    if (tg.tagName.toUpperCase() == 'LABEL')
                        return false;

                    var j$chk = j$(tg).closest('li').find(':checkbox');
                    if ( j$chk[0] != tg){                        
                         if(j$chk.attr('checked'))
                            j$chk.removeAttr('checked');
                         else 
                            j$chk.attr('checked', 'checked');
                        }

EMMERICH · Accepted Answer · 2010-10-19 10:37:44Z

3

Your problem is in the following line

j$chk.attr('checked', !j$chk.attr('checked'));

The call to !j$chk.attr('checked') will return a boolean value, which you're then assigning to checked. You should try:

if(j$chk.attr('checked')) {
  j$chk.removeAttr('checked');
} else {
  j$chk.attr('checked', 'checked');
}

answered Oct 19, 2010 at 10:37

EMMERICH

3,4842 gold badges21 silver badges15 bronze badges

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

4 Comments

Karan Over a year ago

Guys, Now the click on the label is not doing the toggle with the above code. I want to make the toggle work on all the three elements checkbox, label and the LI item.

Karan Over a year ago

One thing i observed is that the code in the else part ( j$chk.attr('checked', 'checked'); ) does not get into effect in the case of Label. And this is weird.

Karan Over a year ago

Another thing i found, the checkbox does not even get unchecked when the label is clicked to set it unchecked.

EMMERICH Over a year ago

could you format that code in your original post? it's pretty difficult to read.

Chinmayee G · Accepted Answer · 2010-10-20 07:21:21Z

1

Instead try

 if ( j$chk[0] != tg)    
     if(!j$chk.attr('checked')){
         j$chk.attr('checked', 'checked');
     }else {
         j$chk.removeAttr('checked');
     }
 }

edited Oct 20, 2010 at 7:21

answered Oct 19, 2010 at 10:34

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

4 Comments

EMMERICH Over a year ago

wouldn't work. you're only setting the checked attribute if the box is checked.

Chinmayee G Over a year ago

that is what you want? checking checkbox on click on label if its unchecked and unchecking it if checkbox is already checked. Right?

EMMERICH Over a year ago

yes, but your code will only set the 'checked' attribute when it already has the 'checked' attribute (meaning it is already checked!)

Chinmayee G Over a year ago

Yes you are right, I forgot to add ! in if condition. Thanks.

Collectives™ on Stack Overflow

Jquery - checkbox label click not working

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related