Menu
pls kindly help me to solve this issue. I want a submit button to show when I checked 2 checkboxes and 3 checkboxes.
I used this to hide and show when 1 checkbox is checked
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#flip-ch1’).hide();
$(‘#radio’).mouseup(function () {
$(‘#ch1’).toggle();
$(‘#flip-ch1’).toggle();
});
});
<!DOCTYPE html><html lang="en"><head><title> Checkbox Control </title><br/>
<meta charset="UTF-8"><br/>
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/><br/>
<!-- From: <URL url="https://www.webdeveloper.com/d/389228-2-and-3-checkboxes/4">https://www.webdeveloper.com/d/389228-2-and-3-checkboxes/4</URL> --><br/>
<style><br/>
h3 { display: inline-block; }<br/>
.fsize { font-weight: normal; }<br/>
.btn_style { display: none; }<br/>
</style>
</head><body><br/>
<div><br/>
<h3> <br/>
<input type="radio" name="rbtn" id="computer"> <label for="computer">Computer Department</label><br/>
<input type="radio" name="rbtn" id="statistics"> <label for="statistics">Statistics Department</label><br/>
<input type="radio" name="rbtn" id="physic"> <label for="physic">Physic Department</label><br/>
<input type="radio" name="rbtn" id="resetOpts"> <label for="resetOpts" class="fsize">Reset</label><br/>
</h3><br/>
<br>
<button class="btn_style" id="flip-ch1">Allocate For Only Computer</button><br/>
<button class="btn_style" id="flip-ch2">Allocate For Only Statistic</button><br/>
<button class="btn_style" id="flip-ch3">Allocate For Only Physics</button><br/>
</div>
<script><br/>
const doc = (IDS) => document.getElementById(IDS);
function show(info) { // alert(info); <br/>
btns = ['flip-ch1','flip-ch2','flip-ch3'];<br/>
btns.forEach(btn => doc(btn).classList.add('btn_style') );<br/>
switch (info) {<br/>
case 'computer' : doc('flip-ch1').classList.toggle('btn_style');<br/>
doc('flip-ch2').classList.toggle('btn_style');<br/>
break;<br/>
case 'statistics' : doc('flip-ch2').classList.toggle('btn_style');<br/>
break;<br/>
case 'physic' : doc('flip-ch3').classList.toggle('btn_style');<br/>
doc('flip-ch2').classList.toggle('btn_style');<br/>
break;<br/>
case 'resetOpts' : break;<br/>
}<br/>
}
function init() {<br/>
var sel = document.querySelectorAll('input'); // alert(sel.length);<br/>
for (var i=0; i<sel.length; i++) {<br/>
sel<I>[i].addEventListener( 'click', function() { show(this.id) } );<br/>
}<br/>
} init();<br/>
<br/>
</script><br/>
<br/>
</body></html><br/>
<input type="checkbox" name="rbtn" id="computer"> <label for="computer">Computer Department</label><br/>
<input type="checkbox" name="rbtn" id="statistics"> <label for="statistics">Statistics Department</label><br/>
<input type="checkbox" name="rbtn" id="physic"> <label for="physic">Physic Department</label><br/>
<input type="checkbox" name="rbtn" id="resetOpts"> <label for="resetOpts" class="fsize">Reset</label>
<!DOCTYPE html><html lang="en"><head><title> CBox Control </title><br/>
<meta charset="UTF-8"><br/>
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/><br/>
<!-- For: <URL url="https://www.webdeveloper.com/d/389228-2-and-3-checkboxes/8">https://www.webdeveloper.com/d/389228-2-and-3-checkboxes/8</URL> --><br/>
<style><br/>
.hide { display: none; }<br/>
</style>
</head><body>
<fieldset id="fset2"> <legend for="fset2"> Checkbox 2 </legend><br/>
<input type="checkbox" id="cb2A"> <label for="cb2A"> 2A </label><br/>
<input type="checkbox" id="cb2B"> <label for="cb2B"> 2B </label><br/>
<input type="button" id="btn2AB" class="hide" value="CBox 2A / 2B"><br/>
</fieldset>
<fieldset id="fset3"> <legend for="fset3"> Checkbox 3 </legend><br/>
<input type="checkbox" id="cb3A"> <label for="cb3A"> 3A </label><br/>
<input type="checkbox" id="cb3B"> <label for="cb3B"> 3B </label><br/>
<input type="checkbox" id="cb3C"> <label for="cb3C"> 3C </label><br/>
<input type="button" id="btn3ABC" class="hide" value="CBox 3A / 3B / 3C"><br/>
</fieldset>
<script><br/>
const doc = (IDS) => document.getElementById(IDS);
function showBtn2(ndx, info) { // just some function to do for testing // alert(ndx + ' : ' + info.id);<br/>
if (doc('cb2A').checked && doc('cb2B').checked)<br/>
{ doc('btn2AB').classList.remove('hide'); } else { doc('btn2AB').classList.add('hide'); } <br/>
}<br/>
function showBtn3(ndx, info) { // just some function to do for testing // alert(ndx + ' : ' + info.id);<br/>
if (doc('cb3A').checked && doc('cb3B').checked && doc('cb3C').checked ) <br/>
{ doc('btn3ABC').classList.remove('hide'); } else { doc('btn3ABC').classList.add('hide'); } <br/>
}
function padHandlers(){<br/>
var sel2 = document.querySelectorAll('#fset2 input[type="checkbox"'); // alert(sel2.length)<br/>
// convert collection to array, then map each element to an event function<br/>
[...sel2].map(function mapper(elm, index){<br/>
elm.addEventListener(<br/>
"click", <br/>
function clicker(e){ showBtn2(index, this); }, // end clicker(e) function<br/>
false <br/>
); //end addEventListener<br/>
}); //end map() function
<i> </i><CODE>var sel3 = document.querySelectorAll('#fset3 input[type="checkbox"'); // alert(sel3.length)</CODE>
// convert collection to array, then map each element to an event function<br/>
[...sel3].map(function mapper(elm, index){<br/>
elm.addEventListener(<br/>
"click", <br/>
function clicker(e){ showBtn3(index, this); }, // end clicker(e) function<br/>
false <br/>
); //end addEventListener<br/>
}); //end map() function<br/>
}<br/>
padHandlers();<br/>
</script>
</body></html><br/>
0.1.9 — BETA 4.19