取消选中一个复选框，取消选中所有其他复选框答案

【问题标题】：Uncheck one checkbox, unchecks all other checkboxes Not Working取消选中一个复选框，取消选中所有其他复选框
【发布时间】：2015-12-10 14:59:35
【问题描述】：

我有一个复选框，当我单击一个复选框 (ckbox3) 时，会显示 3 个带有复选框的选项（check1、check2、check3）。当我取消选中 ckbox3 时，我希望取消选中 check1、check2 和 check3。我不知道该怎么做

有人可以帮我解决一下 Javascript 代码吗..（我需要 Javascript 的解决方案）

HTML：

    <div id="divv1">
        <input type="checkbox" id="ckbox3" >Checkbox1 &nbsp;  
    </div>
    <br>           


    <div id="divv2">
         <input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
         <input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
         <input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
    </div>

JavaScript：

document.getElementById('ckbox3').onclick = function() {
     if(ckbox3.checked){          
           toggleSub(this, 'divv2');
     } else {  
           toggleSub(this, 'divv2');
     }
};

function toggleSub(box,id)
{
    var el = document.getElementById(id);

    if ( box.checked ) {
            el.style.display = 'block';
    } else {
        el.style.display = 'none';
    }
}

CSS：

#divv2
{
 display: none;
 margin-left: 75px;
 font-family: 'PT Sans', sans-serif;

}

JSFiddle：http://jsfiddle.net/vikrams/hLmneafj/1/

【问题讨论】：

不清楚你想要什么。您希望取消选中复选框，那么为什么在未选中 ckbox3 时隐藏复选框

标签： javascript html checkbox

【解决方案1】：

在 ckbox3 上添加 onchange 函数：

<input type="checkbox" id="ckbox3" onchange = "change()" >

在功能上：

function change()
{
if(document.getElementById("ckbox3").checked == false){
document.getElementById("check1").checked = false;
document.getElementById("check2").checked = false;
document.getElementById("check3").checked = false;
}
}

【讨论】：

【解决方案2】：

这是generic 代码，您可以在div 内提供任意数量的复选框。

 document.getElementById('ckbox3').onclick = function() {
                if(ckbox3.checked)
                {
                    
                    toggleSub(this,true);
                }
                else
                {
                    
                    toggleSub(this, false);
                }
                };
                
                function toggleSub(box,status)
                {
                    var div = document.getElementById("divv2");
                    var el = div.getElementsByTagName("input");
                   var len = el.length;
                    while(len--)
                    {
                    
                       div.getElementsByTagName("input")[len].checked = status;
                    }
                    
                }

<div id="divv1">
            <input type="checkbox" id="ckbox3" >Checkbox1 &nbsp;
            
        </div>
        <br>           
                   
              
        <div id="divv2">
                        <input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
                        <input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
                        <input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
        </div>

【讨论】：

【解决方案3】：

我会这样做：

var arr = document.querySelectorAll("[id*='check']");
for(var i=0; i< arr.length; i++){
   arr[i].checked=false;
}

Here is your updated JSFiddle

将上面的代码添加到代码的else部分，当ckbox3未选中时，将其余部分取消选中，如JSFiddle演示所示。

【讨论】：

【解决方案4】：

您可以在下面使用此代码

$("#ckbox3").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});

【讨论】：

【解决方案5】：

请看下面的代码：

<script>

function handleClick(element){
	if (element.checked == true){
		document.getElementById("check1").checked = true;
		document.getElementById("check2").checked = true;
		document.getElementById("check3").checked = true;
	}else{
		document.getElementById("check1").checked = false;
		document.getElementById("check2").checked = false;
		document.getElementById("check3").checked = false;
	}
}
</script>
<div id="divv1">
        <input type="checkbox" id="masterCheckbox" onclick='handleClick(this);'> Checkbox1 &nbsp;
    </div>
    <br>           


    <div id="divv2">
                    <input type="checkbox" name="check1" onclick="calculate()" id="check1">check 1
                    <input type="checkbox" name="check2" onclick="calculate()" id="check2">check 2
                    <input type="checkbox" name="check3" onclick="calculate()" id="check3">check 3
    </div>

【讨论】：

【解决方案6】：

在你的 else 部分试试这个：

else 
{
    el.style.display = 'none';      
    var checks = document.querySelectorAll('#' + id + ' input[type="checkbox"]');
    for(var i =0; i< checks.length;i++){
        var check = checks[i];
        if(!check.disabled){
            check.checked = false;
        }
    }
}

见http://jsfiddle.net/hLmneafj/4/

【讨论】：