<div id="customerServices">
<input id="s9" type="checkbox" /> Parent element<br/>
<input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
<input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
<br/><br/><br/>
<input id="s10" type="checkbox" /> Parent element2<br/>
<input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
<input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
<br/><br/><br/>
<input id="s101" type="checkbox" /> Parent element3<br/>
<input id="s102" type="checkbox" /> Parent element4<br/>
</div>
页面上有一些复选框。我有需要:
- 如果检查了父项,则检查所有子项。
- 如果未选中所有子项,则取消选中父项。
- 如果至少检查了一个 child ,则检查 parent 。
这是一些代码,但它不起作用
$('input[type=checkbox]').change(function() {
var id = $(this).attr('id');
var children = $('.parent-' + id);
//Is this a child
if (children.length)
{
//Is it checked
if ($(this).is(':checked'))
{
//Find the parent
var className = $(this).attr('class');
var pId = className.replace("parent-","");
//If the parent is not checked, then check this parent
if (!$(pId).is(':checked'))
$(pId).attr('checked','checked');
}
//Is it NOT checked
else{
//Do other childs are not checked too?
//var className2 = $(this).attr('class');
//$(className2)
}
}
//If this is a parent, then check all childs
esle{
children.attr('checked', $(this).attr('checked'));
}
});
最佳答案
这里我为你写了代码:
var checkboxHandlerObj = {
init: function() {
$('#customerServices input:checkbox[class="parent"]').click(checkboxHandlerObj.parentClicked);
$('#customerServices input:checkbox[class^="parent-"]').click(checkboxHandlerObj.childClicked);
},
parentClicked: function() {
if ($(this).attr('checked')) {
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').attr('checked', 'checked');
} else {
$('#customerServices input:checkbox[class="parent-' + $(this).attr('id') + '"]').removeAttr('checked');
}
},
childClicked: function() {
var temp = $(this).attr('class').split('-');
var parentId = temp[1];
if ($(this).attr('checked')) {
$('#' + parentId).attr('checked', 'checked');
} else {
var atLeastOneEnabled = false;
$('#customerServices input:checkbox[class="' + $(this).attr('class') + '"]').each(function() {
if ($(this).attr('checked')) {
atLeastOneEnabled = true;
}
});
if (!atLeastOneEnabled) {
$('#' + parentId).removeAttr('checked');
}
}
}
};
checkboxHandlerObj.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="customerServices">
<input id="s9" class="parent" type="checkbox" /> Parent element<br/>
<input id="s15" class="parent-s9" type="checkbox" /> Child element<br/>
<input id="s16" class="parent-s9" type="checkbox" /> Child element<br/>
<br/><br/><br/>
<input id="s10" class="parent" type="checkbox" /> Parent element2<br/>
<input id="s151" class="parent-s10" type="checkbox" /> Child element2<br/>
<input id="s161" class="parent-s10" type="checkbox" /> Child element2<br/>
<br/><br/><br/>
<input id="s101" class="parent" type="checkbox" /> Parent element3<br/>
<input id="s102" class="parent" type="checkbox" /> Parent element4<br/>
</div>
关于javascript - 父子复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5155136/