Javascript 切换复选框_Javascript_Jquery

Javascript 切换复选框

javascript jquery

Javascript 切换复选框,javascript,jquery,Javascript,Jquery,我有4个复选框，我希望切换它们（选中或取消选中），它们应该都是相同的，无论它们处于什么状态。到目前为止，我有： var toggle_click = false; function check_them(element){ if(toggle_click){ $('#'+element+'_1').attr('checked', true); $('#'+element+'_2').attr('checked', true); $('#

我有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设置为false，不如将其全部删除！：）

$（“#”+元素+“_1”）.removeAttr（'checked'）

下面是一个例子：

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;        
});

选中是一个“有趣”属性。我建议您不要使用

attr（'checked'，false）

，而是尝试

removeAttr（'checked'）

基本上，在DOM中，呈现的元素将作为属性进行检查，或者如果它是XHTML兼容的，

checked=checked

。因此，将其设置为false不是正确的做法

至于其他问题，我还不太了解jQuery专业版。

确保在DOM加载完成之前不要调用

检查它们
$(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;
    };
})();


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;
    }
}

好吧，对于不同的方法：将复选框全部设置为非复选框：
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;
  });
});

它也可以只使用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>




取消/检查我

取消/检查我
函数检查（）
{
c1.已检查=！c1.已检查；
c2.checked=！c2.checked；
}

我希望这能有所帮助。
哦，天哪，我怎么了。如果有，就用别的！谢谢Sarfraz！这是不必要的verbose@Justin约翰逊：是的，但我刚刚做了并修复了他正在做的事情，当然可以缩短：）$（“#element1”）。attr（“checked”）==“checked”
对你来说不够布尔吗？true:false`可以完全删除。如果阅读代码的其余部分，您将看到，由于删除了属性，该属性要么为true，要么未定义。你能详细说明你的答案吗？看起来不错，但我不明白为什么在最后两行使用tr
，如果toggle\u click为false，则将其设置为true，如果为true，则将其设置为false。不管它的初始值是什么，它最终都将是错误的。我会用toggle\u click=！点击切换…并使用一个for循环来完成整个过程，其中toggle\u click的值在“checked”之后。
<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>