Javascript 切换复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2363022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle Checkbox
提问by Abs
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
感谢大家的帮助
采纳答案by Sarfraz
........
…………
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;
}
}
回答by Mikezx6r
Checked is a "funny" attribute. One thing I'd suggest is rather than attr('checked', false), try removeAttr('checked')instead.
Checked 是一个“有趣”的属性。我建议的一件事是，而不是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. So, setting it to false isn't the right thing to do.
基本上，DOM，所呈现的元素将已检查作为一个属性，或者如果它是符合XHTML， checked=checked。因此，将其设置为 false 不是正确的做法。
As far as the other issues, I'm not enough of a jQuery pro yet to know.
至于其他问题，我还不够了解 jQuery 专业人士。
回答by cheth
$('tr').click(function(){
var chkbox = document.getElementById("chk"+this.id);
chkbox.checked = !chkbox.checked;
});
回答by Hugo Ham
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.
我希望这有帮助。
回答by Mark Schultheiss
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;
});
});
回答by Justin Johnson
Make sure that you don't call check_thembefore the DOM is finished loading
确保check_them在 DOM 加载完成之前不要调用
$(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;
};
})();
回答by Alex Weber
Instead of setting the attribute checked to false, just remove it altogether! :)
与其将属性设置为 false，不如将其完全删除！:)
$('#'+element+'_1').removeAttr('checked');
$('#'+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;
});
