How to make if I press the 'x' button, it will uncheck all that part and close it? according to my coding, I only just managed to make the top but at the bottom it's not uncheck, and the checkbox at the bottom is not closed, I want it unchecked and closed the bottom checkbox.
Example at the 'solving' checkbox. When I tick that, there will be another checkbox. When I press 'x' button, it will uncheck the 'solving' checkbox. How to uncheck all of that at the bottom 'solving' checkbox and close it when I press 'x' button.
<header>
<h3><b><label for="search">Search</label></b>
<input id="search" type="text" name="search" placeholder="Search.." onkeyup="filterWithSearch(event)" /></h3>
<script>
function fungsi() {
var a = document.getElementById("subSolving1").checked;
var b = document.getElementById("subSolving2").checked;
var c = document.getElementById("subSolving3").checked;
var d = document.getElementById("subConclusion1").checked;
var e = document.getElementById("subConclusion2").checked;
var f = document.getElementById("subRepeated1").checked;
var g = document.getElementById("subRepeated2").checked;
console.log(a, b, c, d, e, f, g);
if (c || d === true) {
document.getElementById("Status").innerHTML = "Problem1";
} else if (b || a || e) {
document.getElementById("Status").innerHTML = "Problem2";
} else if (f && g) {
document.getElementById("Status").innerHTML = "Problem5";
} else if (f) {
document.getElementById("Status").innerHTML = "Problem3";
} else if (g) {
document.getElementById("Status").innerHTML = "Problem4";
}
}
function filterWithSearch(e) {
console.log(e)
if (e.which === 13) {
var searchStr = e.target.value.toLowerCase();
var cxb = document.getElementById('subOptionsContainer').querySelectorAll("label")
var subSolving = document.getElementById("subSolving");
var subConclusion = document.getElementById("subConclusion");
var subRepeated = document.getElementById("subRepeated");
if (searchStr === '') {
subSolving.style.display = Solving.checked ? "block" : "none";
subConclusion.style.display = Conclusion.checked ? "block" : "none";
subRepeated.style.display = Repeated.checked ? "block" : "none";
} else {
subSolving.style.display = "block";
subConclusion.style.display = "block";
subRepeated.style.display = "block";
}
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (cxb[i].textContent.toLowerCase().indexOf(searchStr) !== -1) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
</script>
<body>
<b>Original:</b>
<div id="Alltry">
<script type="text/javascript">
function ShowHideDiv(Solving) {
var subSolving = document.getElementById("subSolving");
subSolving.style.display = Solving.checked ? "block" : "none";
var cxb = subSolving.getElementsByTagName('label');
for (var i = 0; i < cxb.length; i++) {
//console.log(cxb[i])
if (Solving.checked) {
cxb[i].style.display = 'block';
} else {
cxb[i].style.display = 'none';
}
}
}
function uncheckAll(divid) {
var checks = document.querySelectorAll('#' + divid + ' input[type="checkbox"]');
for (var i = 0; i < checks.length; i++) {
var check = checks[i];
if (!check.disabled) {
check.checked = false;
}
}
}
</script>
<div style="float: left; max-width: 80%;"><label for="Solving"> <input type="checkbox" id="Solving" onclick="ShowHideDiv(this)" value="Solving"/>Solving</label>
</div>
</div>
<script type="text/javascript">
function ShowHideDiv2(Conclusion) {
var subConclusion = document.getElementById("subConclusion");
subConclusion.style.display = Conclusion.checked ? "block" : "none";
}
</script>
<label for="Conclusion"> <input type="checkbox" id="Conclusion" onclick="ShowHideDiv2(this)" value="Conclusion"/>Conclusion</label>
<script type="text/javascript">
function ShowHideDiv3(Repeated) {
var subRepeated = document.getElementById("subRepeated");
subRepeated.style.display = Repeated.checked ? "block" : "none";
}
</script>
<label for="Repeated"> <input type="checkbox" id="Repeated" onclick="ShowHideDiv3(this)" value="Repeated"/>
Repeated</label>
<div id="subOptionsContainer">
<div id="subSolving" style="display: none">
<input type="button" id="uncheckAll" onclick="uncheckAll('Alltry')" value="x"><br>
<p><label> <input type="checkbox" id="subSolving1" onclick="fungsi()"/>subSolving1
</label></p>
<p><label> <input type="checkbox" id="subSolving2" onclick="fungsi()"/>subSolving2</label></p>
<p><label> <input type="checkbox" id="subSolving3" onclick="fungsi()"/>subSolving3 </label></p>
</div>
<div id="subConclusion" style="display: none">
<p><label> <input type="checkbox" id="subConclusion1" onclick="fungsi()"/>subConclusion</label></p>
<p><label> <input type="checkbox" id="subConclusion2" onclick="fungsi()"/>subConclusion
</label></p>
</div>
<div id="subRepeated" style="display: none">
<p><label> <input type="checkbox" id="subRepeated1" onclick="fungsi()"/>subRepeated1</label></p>
<p><label> <input type="checkbox" id="subRepeated2" onclick="fungsi()"/>subRepeated2
</label></p>
</div>
</div>
<b><hr/><p id="Status"></p></b></header>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire