Question

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

在页面加载时，可能勾选或不勾选一些复选框 - 但是一旦我点击链接并运行此功能，我希望这些复选框全部进入相同的状态。

当我尝试上述操作时，它似乎没有勾选方框，有时它会将它们全部打勾并再次运行此功能也无效。到底是怎么回事？我被剥夺了咖啡和混淆！

应该使用复选框组还是什么？

感谢大家的帮助

Answer 1

Checked是一个“有趣”的属性。我建议的一件事是attr('checked', false)，而不是removeAttr('checked')。

基本上，在DOM中，渲染元素将作为属性进行检查，或者如果它符合XHTML，则checked=checked。因此，将其设置为false不是正确的做法。

就其他问题而言，我还不够了解jQuery专业版。

Answer 2

........

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

Answer 3

$('tr').click(function(){
        var chkbox = document.getElementById("chk"+this.id);
        chkbox.checked = !chkbox.checked;

    });

Answer 4

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

我希望这会有所帮助。

Answer 5

嗯，对于不同的方法：将复选框全部设置为不是：

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

注意如果你给他们一个名为“我的复选框”的课程甚至更简单：

var toggle_click = false;
$(function() { 
  $('.mycheckbox').click(function() {
    $('.mycheckbox').each().checked = !this.checked;
    toggle_click = !toggle_click;
  });
});

Answer 6

不要将检查的属性设置为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;        
});

Answer 7

确保在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;
    };
})();

切换复选框

7 个答案: