如果所有子复选框未选中，如何删除复选框？ [英] How to remove checked checkbox if all sub check boxes are unchecked?
本文介绍了如果所有子复选框未选中，如何删除复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一组复选框（Sub1，Sub2，Sub3）和一个主复选框。如果选中任何子复选框，则必须选中主复选框。如果所有子复选框未选中，则只有主复选框必须取消选中，如果选中了至少一个复选框，则必须检查主复选框。下面给出我的代码。
<！DOCTYPE html>
< html>
< script type ='text / javascript'src =jquery-1.10.1.js>< / script>
< script type ='text / javascript'>
$（window）.load（function（）{
var chk1 = $（input [type ='checkbox'] [value ='1']）;
$ b b var chk2 = $（input [type ='checkbox'] [value ='2']）;
var chk3 = $（input [type ='checkbox'] [value ='3'] ）;
chk2.on（'change'，function（）'）;
var chk4 = $（input [type ='checkbox'] [value ='4' {
chk1.prop（'checked'，this.checked）;
}）;
chk3.on（'change'，function（）{
chk1 .prop（'checked'，this.checked）;
}）;
chk4.on（'change'，function（）{
chk1.prop ，this.checked）;
}）;
}）;
< / script>
< / head>
< body>
< input type =checkboxvalue =1class =user_name> Main1
< br>
< br>
< br>
< input type =checkboxvalue =2id =oneclass =user_name> sub-2
< br>
< input type =checkboxvalue =3id =oneclass =user_name> sub-3
< br>
< input type =checkboxvalue =4id =oneclass =user_name> sub-4
< br>
< / body>
< / html>
解决方案
您可以有一个单击处理程序，是否检查任何子项目
$（function（）{var $ checks = $（input.user_name：not ）），$ main = $（'input.user_name.main'）; $ checks.change（function（）{$ main.prop（'checked'，$ checks.is（'：checked'）） };; < script src =https： /ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script><input type =checkboxvalue =1class =user_name main> ; Main1< br>< br>< br>< input type =checkboxvalue =2id =oneclass =user_name> sub-2< br& checkboxvalue =3id =oneclass =user_name> sub-3< br>< input type =checkboxvalue =4id =oneclass =user_name> sub-4< br>
I have group of checkboxes (Sub1,Sub2,Sub3) and One main check box. If check any sub check box the main checkbox have to be checked. If all the sub check boxes are uncheck then only the main check box have to be unchecked,if atleast one checkbox is checked then the main checkbox have to be checked.My code is given below.
<!DOCTYPE html>
<html>
<script type='text/javascript' src="jquery-1.10.1.js"></script>
<script type='text/javascript'>
$(window).load(function() {
var chk1 = $("input[type='checkbox'][value='1']");
var chk2 = $("input[type='checkbox'][value='2']");
var chk3 = $("input[type='checkbox'][value='3']");
var chk4 = $("input[type='checkbox'][value='4']");
chk2.on('change', function() {
chk1.prop('checked', this.checked);
});
chk3.on('change', function() {
chk1.prop('checked', this.checked);
});
chk4.on('change', function() {
chk1.prop('checked', this.checked);
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" class="user_name">Main1
<br>
<br>
<br>
<input type="checkbox" value="2" id="one" class="user_name">sub-2
<br>
<input type="checkbox" value="3" id="one" class="user_name">sub-3
<br>
<input type="checkbox" value="4" id="one" class="user_name">sub-4
<br>
</body>
</html>
解决方案
You can have a single click handler where you can check whether any of the sub items is checked
$(function() {
var $checks = $("input.user_name:not(.main)"),
$main = $('input.user_name.main');
$checks.change(function() {
$main.prop('checked', $checks.is(':checked'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" class="user_name main">Main1
<br>
<br>
<br>
<input type="checkbox" value="2" id="one" class="user_name">sub-2
<br>
<input type="checkbox" value="3" id="one" class="user_name">sub-3
<br>
<input type="checkbox" value="4" id="one" class="user_name">sub-4
<br>
这篇关于如果所有子复选框未选中，如何删除复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
