切换复选框
[英]Toggle Checkbox
问题描述
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: 
我有4个复选框，我想切换它们（选中或取消选中），它们应该是相同的状态。我到目前为止：
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 个解决方案
解决方案1
8 2010-03-02 12:30:22
Checked is a "funny" attribute. Checked是一个“有趣”的属性。 One thing I'd suggest is rather than attr('checked', false) , try removeAttr('checked') instead. 我建议的一件事是attr('checked', false)而不是attr('checked', false) ，尝试removeAttr('checked') 。
Basically, in the DOM, the rendered element will have checked as an attribute, or if it's being XHTML compliant, checked=checked . 基本上，在DOM中，渲染的元素将作为属性进行检查，或者如果它符合XHTML，则checked=checked 。 So, setting it to false isn't the right thing to do. 因此，将其设置为false不是正确的做法。
As far as the other issues, I'm not enough of a jQuery pro yet to know. 至于其他问题，我还不够jQuery专业人士尚未知道。
解决方案2
8 已采纳 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;
}
}
解决方案3
4 2012-11-28 03:05:09
$('tr').click(function(){
var chkbox = document.getElementById("chk"+this.id);
chkbox.checked = !chkbox.checked;
});
解决方案4
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. 它也可以只使用javascript完成而没有麻烦，你可以使用图像或任何让你点击它的东西。
<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. 我希望这有帮助。
解决方案5
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: 注意如果你给他们一个名为“mycheckbox”的课程更简单：
var toggle_click = false;
$(function() {
$('.mycheckbox').click(function() {
$('.mycheckbox').each().checked = !this.checked;
toggle_click = !toggle_click;
});
});
解决方案6
0 2010-03-02 12:30:22
Instead of setting the attribute checked to false, just remove it altogether! 而不是将选中的属性设置为false，只需将其完全删除即可！ :) :)
$('#'+element+'_1').removeAttr('checked'); $（ '＃' +元素+ '_ 1'）removeAttr（ '检查'）;
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;
});
解决方案7
0 2010-03-02 12:32:54
Make sure that you don't call check_them before the DOM is finished loading 确保在DOM加载完成之前不要调用check_them
$(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;
};
})();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.