I have a simple HTML page with different elements which are being hidden or displayed because of choosing some options before.
I have different options (radiobuttons) which have to be clicked before, they should control and hide or show the elements:
- Household or Nohousehold (Household = 1, Nohousehold = 2)
- Household or Nohousehold and Monument (Monument = 1 or 2)
- Household and Monument
- Nohousehold
- Nohousehold and Zones (Zones = 1 or 2)
- Nohousehold and Monument
- Nohousehold and Zones and Monument
I called the div classes on html after the numbers above (for example: 1 = class1, 2 = class2,.. and so on), each class should be visible by selecting from the options above.
<div > //This should be displayed only if Household = 1 or 2
...
</div>
<div > //This should be displayed only if Household = 1 or 2 and Monument = 1
...
</div>
<div > //This should be displayed only if Household = 1 and Monument = 1
...
</div>
<div > //This should be displayed only if Household = 2
...
</div>
<div > //This should be displayed only if Household = 2 and Zones = 1
...
</div>
<div > //This should be displayed only if Household = 2 and Monument = 1
...
</div>
<div > //This should be displayed only if Household = 2 and Zones = 1 and Monument = 1
...
</div>
<div >
...
</div>
<div >
...
</div>
My jQuery Code looks like this:
function checkClass1234() {
let household = $('input:radio[name="household"]:checked').val(); //this are the radiobuttons on the html page
let zones = $('input:radio[name="zones"]:checked').val();
let monument = $('input:radio[name="monument"]:checked').val();
if (household === '1' || household === '2') {
$('.class1').show();
} else if ((household === '1' || household === '2') && (monument === '1')) {
$('.class2').show();
} else {
$('.class1').hide();
clearValues('.class1');
$('.class2').hide();
clearValues('.class2');
}
if (household === '1' && monument === '1') {
$('.class3').show();
$('.class2').hide();
clearValues('.class2');
} else {
$('.class3').hide();
clearValues('.class3');
}
if (household === '2') {
$('.class4').show();
$('.class3').hide();
clearValues('.class3');
} else {
$('.class4').hide();
clearValues('.class4');
}
if (household === '2' && zones === '1' && monument === '1') {
$('.class7').show();
$('.class2').hide();
clearValues('.class2');
$('.class3').hide();
clearValues('.class3');
} else if (household === '2' && monument === '1') {
$('.class6').show();
$('.class2').hide();
clearValues('.class2');
$('.class3').hide();
clearValues('.class3');
} else if (household === '2' && zones === '1') {
$('.class5').show();
$('.class2').hide();
clearValues('.class2');
$('.class3').hide();
clearValues('.class3');
} else {
$('.class4').hide();
clearValues('.class4');
$('.class5').hide();
clearValues('.class5');
$('.class6').hide();
clearValues('.class6');
$('.class7').hide();
clearValues('.class7');
}
}
Im sorry for my english and sorry if there is something missing in my question, just let me know! Thanks!
My problem is, when i select the options first time, it works pretty good except the class7. When i change the selected options or switch only one then nothing happens anymore. It looks like its frozen. I tried different ways to sort the if´s but this is the best result until now. Im pretty new to jQuery and i would appreciate someones help! :)
CodePudding user response：
check the below sample code to show and hide element.
<div > Household
...
</div>
<input type="checkbox" onclick="checkClass1234()" id="household" name="vehicle1" value="1" >
<label> Hide & Show Household</label><br>
<script>
function checkClass1234() {
var rate_value;
if (document.getElementById('household').checked) {
rate_value = document.getElementById('household').value;
if(rate_value != "undefined"){
document.getElementsByClassName('class1')[0].style.display = 'none';
}
}else{
document.getElementsByClassName('class1')[0].style.display = 'block';
}
}
</script>CodePudding user response：
Here is one way of doing it with minimal code. But it requires that the visibility settings are done per element in an extra data-show attribute. This attribute contains a string with at most three characters, one for each of the radio buttons for household, monument and zones. The characters are checked one by one in the .every() loop: if v=="x" then the i-th radio button value must be non-zero, if v=="-" then nothing is required and if v is anything else then the i-th radio button's value must match exactly that.
const toggledivs = document.querySelectorAll("[data-show]");
const RBs = [ frm.household, frm.monument, frm.zones ];
toggledivs.forEach(d=>d.style.display="none");
document.body.onclick = ev => {
if (ev.target.tagName == "INPUT")
toggledivs.forEach(d=>d.style.display=d.dataset.show.split("").every((v,i)=>v=="-"||(v=="x"&&RBs[i].value>0)||v==RBs[i].value) ? "" : "none" )
}<form name="frm">
<fieldset><label><input type="radio" name="household" value="0" checked>0</label>
<label><input type="radio" name="household" value="1">1</label><label><input type="radio" name="household" value="2">2</label> Household</fieldset>
<fieldset><label><input type="radio" name="monument" value="0" checked>0</label>
<label><input type="radio" name="monument" value="1">1</label> Monument</fieldset>
<fieldset><label><input type="radio" name="zones" value="0" checked>0</label>
<label><input type="radio" name="zones" value="1">1</label> Zones</fieldset>
</form>
<div data-show="x">1 //This should be displayed only if Household = 1 or 2 ...
</div>
<div data-show="x1">2 //This should be displayed only if Household = 1 or 2 and Monument = 1 ...
</div>
<div data-show="11">3 //This should be displayed only if Household = 1 and Monument = 1 ...
</div>
<div data-show="2">4 //This should be displayed only if Household = 2 ...
</div>
<div data-show="2-1">5 //This should be displayed only if Household = 2 and Zones = 1 ...
</div>
<div data-show="21">6 //This should be displayed only if Household = 2 and Monument = 1 ...
</div>
<div data-show="211">7 //This should be displayed only if Household = 2 and Zones = 1 and Monument = 1 ...
</div>
<div >
...
</div>
<div >
...
</div>