Toggle Checkbox
Question
I have 4 checkboxes and I wish to toggle them (checked or unchecked) and they should all be the same what ever state they are in. I have this so far:
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 page load some of the checkboxes may be ticked or not ticked - but once I click a link and run this function, I want these checkboxes to go all to the same state.
When I try the above, it just doesn't seem to tick the boxes and sometimes it ticks them all and running this function again does nothing. What is going on? I am coffee deprived and confused!
Should be making use of a checkbox group or something?
Thanks all for any help
7 answers
solution1
8 2010-03-02 12:30:22
Checked is a "funny" attribute. One thing I'd suggest is rather than attr('checked', false) , try removeAttr('checked') instead.
Basically, in the DOM, the rendered element will have checked as an attribute, or if it's being XHTML compliant, checked=checked . So, setting it to false isn't the right thing to do.
As far as the other issues, I'm not enough of a jQuery pro yet to know.
solution2
8 ACCPTED 2010-03-02 12:33:31
........
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;
}
}
solution3
4 2012-11-28 03:05:09
$('tr').click(function(){
var chkbox = document.getElementById("chk"+this.id);
chkbox.checked = !chkbox.checked;
});
solution4
2 2017-06-09 01:33:30
It can also be done using only javascript without troubles, you can use an image or anything that lets you 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>
I hope this helps.
solution5
1 2010-03-02 13:09:12
Well, for different approach: Sets checkboxs all to whatever it wasn't:
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 simpler:
var toggle_click = false;
$(function() {
$('.mycheckbox').click(function() {
$('.mycheckbox').each().checked = !this.checked;
toggle_click = !toggle_click;
});
});
solution6
0 2010-03-02 12:30:22
Instead of setting the attribute checked to false, just remove it altogether! :)
$('#'+element+'_1').removeAttr('checked');
Here's 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;
});
solution7
0 2010-03-02 12:32:54
Make sure that you don't call check_them before the DOM is finished loading
$(function() {
check_them("whatever");
});
Also, you can simplify this whole thing 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;
};
})();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.