Geek Answers Handbook

Toggle checkbox

I have 4 checkboxes and I want to toggle them (checked or not checked), and they should all be the same, whatever they are. I still do this:

var toggle_click = false; function check_them(element){ if(toggle_click){ $('#'+element+'_1').attr('checked', true); $('#'+element+'_2').attr('checked', true); $('#'+element+'_3').attr('checked', true); $('#'+element+'_4').attr('checked', true); } if(!toggle_click){ $('#'+element+'_1').attr('checked', false); $('#'+element+'_2').attr('checked', false); $('#'+element+'_3').attr('checked', false); $('#'+element+'_4').attr('checked', false); } if(!toggle_click){ toggle_click = true; } if(toggle_click) { toggle_click = false; } }

On the page load, some flags may or may not be checked - but as soon as I click on the link and launch this function, I want these flags to all go to the same state.

When I try to do this, it simply does not put checkmarks in the boxes, and sometimes it ticks them off, and this function again does nothing. What's happening? I am deprived of coffee and confused!

Should a group of flags be used or something like that?

Thank you all for your help.

+7
javascript jquery
source share
7 answers

........

 var isChecked = false; function check_them(element){ if(isChecked === false) { $('#'+element+'_1').attr('checked', true); $('#'+element+'_2').attr('checked', true); $('#'+element+'_3').attr('checked', true); $('#'+element+'_4').attr('checked', true); isChecked = true; } else { $('#'+element+'_1').attr('checked', false); $('#'+element+'_2').attr('checked', false); $('#'+element+'_3').attr('checked', false); $('#'+element+'_4').attr('checked', false); isChecked = false; } }
+7
source share

Checked - this is a "funny" attribute. One thing I suggest, not attr('checked', false) , try removeAttr('checked') .

Basically, in the DOM, the rendered element will be checked as an attribute, or if it matches XHTML, checked=checked . So setting it to false is not what you need to do.

As for the other issues, it’s not enough for me to know jQuery pro.

+6
source share
 $('tr').click(function(){ var chkbox = document.getElementById("chk"+this.id); chkbox.checked = !chkbox.checked; });
+4
source share

Well, for different approaches: Sets checkboxes for everything that was not:

 var toggle_click = false; function setCheck(mythis) { $('#'+element+'_1').checked = !mythis.checked; $('#'+element+'_2').checked = !mythis.checked; $('#'+element+'_3').checked = !mythis.checked; $('#'+element+'_4').checked = !mythis.checked; toggle_click = !toggle_click; }; $(function() { $('#'+element+'_1').click(function() { setCheck(this); }); $('#'+element+'_2').click(function() { setCheck(this); }); $('#'+element+'_3').click(function() { setCheck(this); }); $('#'+element+'_4').click(function() { setCheck(this); }); });

NOTE If you give them a class called "mycheckbox" even easier:

 var toggle_click = false; $(function() { $('.mycheckbox').click(function() { $('.mycheckbox').each().checked = !this.checked; toggle_click = !toggle_click; }); });
+1
source share

This can also be done using javascript only, no problem, you can use the image or anything that allows you to click it too.

 <html> <body> <a href=" javascript:check();"> Toggle </a> <br> <input type="checkbox" id="c1" > Un/Check me <br> <input type="checkbox" id="c2" > Un/Check me </body> </html> <script> function check() { c1.checked = !c1.checked; c2.checked = !c2.checked; } </script>

Hope this helps.

+1
source share

Instead of setting the attribute marked as false just delete it altogether! :)

$ ('#' + element + '_ 1') removeAttr ('checked') ;.

Here is an example:

 var state = $("#element1").attr("checked") === "checked" ? true : false; $("#test").click(function(){ $("input[id^=element]").each(function(){ if(state === false){ $(this).attr("checked", "checked"); }else{ $(this).removeAttr("checked"); } }); state = !state; });
0
source share

Make sure you do not call check_them until the DOM has finished loading

 $(function() { check_them("whatever"); });

In addition, you can simplify all this to the following:

 var check_them = (function() { var is_checked = false; // Now this is not global, huzzah return function(element) { // You can update all of the elements at once $('#'+element+'_1, #'+element+'_2, #'+element+'_3, #'+element+'_4').attr('checked', !is_checked); is_checked = !is_checked; }; })();
0
source share

More articles:


All Articles