[英]Toggle Checkbox
我有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; }
}
在页面加载时,可能勾选或不勾选一些复选框 - 但是一旦我单击链接并运行此功能,我希望这些复选框全部进入相同的状态。
当我尝试上面的内容时,它似乎没有勾选方框,有时它会将它们全部打勾并且再次运行此功能也无效。 到底是怎么回事? 我被剥夺了咖啡和困惑!
应该使用复选框组还是什么?
谢谢大家的帮助
Checked是一个“有趣”的属性。 我建议的一件事是attr('checked', false)
而不是attr('checked', false)
,尝试removeAttr('checked')
。
基本上,在DOM中,渲染的元素将作为属性进行检查,或者如果它符合XHTML,则checked=checked
。 因此,将其设置为false不是正确的做法。
至于其他问题,我还不够jQuery专业人士尚未知道。
........
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;
}
}
$('tr').click(function(){
var chkbox = document.getElementById("chk"+this.id);
chkbox.checked = !chkbox.checked;
});
它也可以只使用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>
我希望这有帮助。
那么,对于不同的方法:将复选框全部设置为它不是:
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);
});
});
注意如果你给他们一个名为“mycheckbox”的课程更简单:
var toggle_click = false;
$(function() {
$('.mycheckbox').click(function() {
$('.mycheckbox').each().checked = !this.checked;
toggle_click = !toggle_click;
});
});
而不是将选中的属性设置为false,只需将其完全删除即可! :)
$( '#' +元素+ '_ 1')removeAttr( '检查');
这是一个例子:
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;
});
确保在DOM加载完成之前不要调用check_them
$(function() {
check_them("whatever");
});
此外,您可以将以下内容简化为以下内容:
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.