Question

我有一个复选框，当我点击一个复选框（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/

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

Answer 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>

Answer 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演示中所示。

Answer 4

您可以使用以下代码

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

Answer 5

请查看以下代码：

＆＃13;

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

＆＃13;

Answer 6

在你的其他部分尝试这个：

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/

取消选中一个复选框，取消选中所有其他复选框“不工作”

6 个答案: