Is there better way to show and hide lots of elements and uncheck checkboxes on hide?
Question
I have this partial code and as you see It includes lots of checkboxes, radios and hidden classes. I tried to to write as I know, but when condition lists get longer It gets complicated and looks bad way of writing code. So my question is , Is there better way to show and hide lots of classes and on hide clear chexboexes and radios? Thanks in advance.
function showData() { if (relativeYes.checked) { document.getElementById('relativeConditions').style.display = 'block'; } else { document.getElementById('relativeConditions').style.display = 'none'; } if (relativeNo.checked) { document.getElementById('verification').style.display = 'block'; } else { document.getElementById('verification').style.display = 'none'; } if (no.checked) { document.getElementById('output').innerHTML = 'Nope'; document.getElementById('gender').style.display = 'none'; } else { document.getElementById('output').innerHTML = ''; } if (yes.checked) { document.getElementById('profiling').style.display = 'block'; } else { document.getElementById('profiling').style.display = 'none'; } if (profilingYes.checked) { document.getElementById('output').innerHTML = 'DO'; document.getElementById('secondPart').style.display = 'none'; } else { document.getElementById('secondPart').style.display = 'block'; } if (profilingNo.checked) { document.getElementById('gender').style.display = 'block'; } if (yes.checked && male.checked) { document.getElementById('maleDiagnosis').style.display = 'block'; } else { document.getElementById('maleDiagnosis').style.display = 'none'; } if (yes.checked && female.checked) { document.getElementById('femaleDiagnosis').style.display = 'block'; } else { document.getElementById('femaleDiagnosis').style.display = 'none'; } if (maleMlm.checked === true && maleDiagnosis.style.display == 'block') { document.getElementById('output').innerHTML = 'DO'; } else if (malePrt.checked) { document.getElementById('output').innerHTML = 'OTHER'; } if (malePn.checked === true && maleMlm.checked === false) { document.getElementById('jaw').style.display = 'block' } else { document.getElementById('jaw').style.display = 'none' } if (maleMlm.checked === false && malePn.checked === true && malePrt.checked === true) { document.getElementById('output').innerHTML = ''; } if (jawYes.checked) { document.getElementById('output').innerHTML = 'DO'; } else if (jawNo.checked) { document.getElementById('output').innerHTML = 'OTHER'; } if ((maleMlm.checked || malePrt.checked || malePn.checked) && maleDiagnosis.style.display == 'none') { maleMlm.checked = maleMlm.unchecked; malePrt.checked = malePrt.unchecked; malePn.checked = malePn.unchecked; } if ((jawYes.checked || jawNo.checked) && document.getElementById('jaw').style.display == 'none') { jawYes.checked = jawYes.unchecked; jawNo.checked = jawNo.unchecked; } if ((profilingNo.checked || profilingYes.checked) && profiling.style.display == 'none') { profilingNo.checked = profilingNo.unchecked; profilingYes.checked = profilingYes.unchecked; } } function clearRadios(id) { var Radios = document.getElementById(id).getElementsByTagName('input'); for (var i = 0; i < Radios.length; i++) { if (Radios[i].type == 'radio') { Radios[i].checked = false; } } } document.getElementById('container').addEventListener('change', showData);
#jaw, #age, #profiling, #secondPart, #verification, #maleDiagnosis, #femaleDiagnosis, #relativeConditions, #gender { display: none; }
<body> <div id="container" onchange="showData();"> <div id="relative"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque, laboriosam ? Yes<input id="relativeYes" type="radio" name="relative" onchange="clearRadios('none')"> No<input id="relativeNo" type="radio" name="relative"> </div> <div id="relativeConditions"> 1. Lorem ipsum dolor sit amet consectetur, adipisicing elit. <input type="radio" name="relaiveConditionsCheck"><br> 2. Lorem ipsum dolor sit.****<input type="radio" name="relaiveConditionsCheck"><br> 3. Lorem ipsum dolor sit amet consectetur.<input type="radio" name="relaiveConditionsCheck"><br> 4. Lorem ipsum dolor sit amet consectetur adipisicing.<input type="radio" name="relaiveConditionsCheck"> </div> <div id="none"> <div id="verification"> Lorem ipsum dolor sit?<br> Yes <input id="yes" type="radio" name="verification"> No<input id="no" type="radio" name="verification"><br> </div> <div id="profiling"> Lorem ipsum dolor sit amet ? Yes<input id="profilingYes" name="profiling" type="radio"> No<input id="profilingNo" name="profiling" type="radio"> </div> <div id="secondPart"> <div id="gender"> GEnder: Male</label><input id="male" type="radio" name="gender" > Female</label> <input id="female" type="radio" name="gender" ><br> </div> <div id="maleDiagnosis"> Mlm<input id="maleMlm" type="checkbox"> Prt <input id="malePrt" type="checkbox"> Pn<input id="malePn" type="checkbox" ><br> </div> <p id="jaw"> Lorem ipsum dolor sores? Yes<input id="jawYes" type="radio" name="jaw"> No<input id="jawNo" type="radio" name="jaw"> </p> <div id="femaleDiagnosis" > Mm<input type="checkbox"> Or<input type="checkbox"> Pan<input type="checkbox"><br> </div> </div> </div> <span style="color:red">Output:</span><span id="output"> </span> </div> </body>
1 answers
solution1
0 ACCPTED 2017-10-02 02:00:38
The single best change you could make would be to make use of the ternary operator ( reference ). The ternary operator is an efficient short-hand approach to writing If/Else statements, which your script is heavy on.
The ternary operator essentially works by taking a condition first (eg your IF statement), followed by an expression to evaluate when that condition is true and then finally what an expression to evaluate when the condition is false. This is stylized as: condition ? expr1 : expr2 condition ? expr1 : expr2 .
Taking just your first example, that six lines of code can be condensed into one:
if (relativeYes.checked) {
document.getElementById('relativeConditions').style.display = 'block';
}
else {
document.getElementById('relativeConditions').style.display = 'none';
}
...becomes one line...
relativeYes.checked ? document.getElementById('relativeConditions').style.display = 'block' : document.getElementById('relativeConditions').style.display = 'none';
Beyond that, I'd recommend caching & storing all your DOM references, since your showData() function is called anytime any value is changed in any input (eg frequently).
Finally, it's generally recommended to add/remove classes to an element as a way to hide or show it, as opposed to continuously setting the style.display property to block and none .
This CodePen makes all of these enhancements, netting a JS block nearly half the size as your original: https://codepen.io/anon/pen/YrxeXx
NOTE : In the real world, you wouldn't want to declare all these variables in the global space as I did here, that was only for expediency.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.