切换复选框

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