provides my idea: you can separate the parent class and the subclass, the subclass is wrapped with an element, and the parent class is wrapped with an element to get whether the checked of all subclasses of the parent class checkbox is true,. If so, the parent class sets the checked to true, if there is only one, then it is semi-selected, and all of them are false, then the checke is false.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Linked Checkbox</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
function LinkedCheckbox($domBase)
{
this.domBase = $domBase || document;
}
LinkedCheckbox.prototype.queryChildList = function($domThis, $checked, $recurse){
let selector = 'input[type="checkbox"]';
if($domThis === null)
selector += '[data-path]';
else
{
let thisPath = $domThis.getAttribute('data-path');
let thisPathDeep = parseInt($domThis.getAttribute('data-path-deep'), 10);
selector += '[data-path^="'+(thisPath+'.')+'"]';
if($recurse === false)
selector += '[data-path^="'+(thisPath+'.')+'"][data-path-deep="'+(thisPathDeep+1)+'"]';
if($checked === true)
selector += ':checked';
}
return this.domBase.querySelectorAll(selector);
};
LinkedCheckbox.prototype.querySuper = function($domThis){
let thisPath = $domThis.getAttribute('data-path');
let thisPathDeep = parseInt($domThis.getAttribute('data-path-deep'), 10);
if(thisPathDeep === 1)
return null;
let superPath = thisPath.substr(0, thisPath.lastIndexOf('.'));
let superPathDeep = thisPathDeep - 1;
return this.domBase.querySelector('input[type="checkbox"][data-path="'+(superPath)+'"][data-path-deep="'+(superPathDeep)+'"]');
};
LinkedCheckbox.prototype.onchange_child = function($domThis){
let arrDomChild = this.queryChildList($domThis, false, true);
let i;
for(i=0; i<arrDomChild.length; iPP)
{
arrDomChild[i].checked = $domThis.checked;
arrDomChild[i].indeterminate = false;
}
};
LinkedCheckbox.prototype.onchange_super = function($domThis){
let domSuper = $domThis;
let arrDomChild, arrDomChildChecked;
while(domSuper != null)
{
domSuper = this.querySuper(domSuper);
if(domSuper === null)
break;
arrDomChild = this.queryChildList(domSuper, false, true);
arrDomChildChecked = this.queryChildList(domSuper, true, true);
if($domThis.checked === true)
{
domSuper.checked = true;
domSuper.indeterminate = (arrDomChildChecked.length < arrDomChild.length);
}
else
{
if(arrDomChildChecked.length <= 0)
{
domSuper.checked = false;
domSuper.indeterminate = false;
}
else
{
domSuper.checked = true;
domSuper.indeterminate = (arrDomChildChecked.length < arrDomChild.length);
}
}
}
};
LinkedCheckbox.prototype.onchange = function($domThis){
this.onchange_child($domThis);
this.onchange_super($domThis);
};
(function(/* init */){
let linkedCheckbox = new LinkedCheckbox(document);
let arrDomCheckBox = linkedCheckbox.queryChildList(null, false, true);
let funOnChange = function(){linkedCheckbox.onchange(this)};
let i, dom, path;
for(i=0; i<arrDomCheckBox.length; iPP)
{
dom = arrDomCheckBox[i];
path = dom.getAttribute('data-path');
dom.setAttribute('data-path-deep', path.split('.').length);
dom .addEventListener('change', funOnChange);
}
})();
});
</script>
</head>
<body>
<label><input type="checkbox" name="check" value="1" class="0" data-path="1"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.1"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.2"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.3"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.3.1"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.3.2"></label>
<br />
<label><input type="checkbox" name="check" value="2" class="1" data-path="1.1.3.3"></label>
<br />
<label><input type="checkbox" name="check" value="3" class="1" data-path="1.2"></label>
<br />
<label><input type="checkbox" name="check" value="4" class="1" data-path="1.3"></label>
<br />
<label><input type="checkbox" name="check" value="5" class="1" data-path="1.4"></label>
</body>
</html>
is implemented in native js, and detailed notes are written
<body>
<div id="wrapper">
<input type="checkbox" name="check" value="1" class="check checkAll">
<input type="checkbox" name="check" value="2" class="check">
<input type="checkbox" name="check" value="3" class="check">
<input type="checkbox" name="check" value="4" class="check">
<input type="checkbox" name="check" value="5" class="check">
</div>
<script type="text/javascript">
var checkList = document.getElementsByClassName("check"); // checkBox
var checkAllList = document.getElementsByClassName("checkAll"); // ()
var checkBoxLenth = checkList.length; //
var checkedSize = 0; //
for(var i=0; i< checkBoxLenth; iPP){
checkList[i].onclick = function(){ // checkBoxonClick
if( this.className.indexOf("checkAll") > -1){ //
for(var j=0; j< checkBoxLenth; jPP ) {
checkList[j].checked = this.checked; //
}
}else{
if(!this.checked){ // checked false
for(var k = 0; k < checkAllList.length; kPP ){
checkAllList[k].checked = false;
}
checkedSize--;
}else{
checkedSizePP;
}
}
if(checkedSize >= checkBoxLenth -1 ){ // >=
for(var k = 0; k < checkAllList.length; kPP ){
checkAllList[k].checked = true;
}
}
}
}
</script>
</body>
The last four subclasses of
store an array.
put the selected push into the array.
check the first parent class when the array length is equal to 4.
when the first parent class is inverted, empty the array
