我有这个部分代码，如您所见，它包含许多复选框、 radio 和隐藏类。我试着按照我所知道的来写，但是当条件列表变长时，它变得复杂并且看起来很糟糕的编写代码的方式。所以我的问题是，是否有更好的方法来显示和隐藏大量类以及隐藏清晰的 chexboexes 和 radio ？提前致谢。
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>最佳答案
您可以做出的最佳更改是使用三元运算符 ( reference )。三元运算符是编写 If/Else 语句的一种有效的简写方法，您的脚本对此很重视。
三元运算符的工作原理是首先采用条件(例如您的 IF 语句)，然后是用于评估该条件何时为真的表达式，最后是当条件为假时要评估的表达式。这被程式化为:
条件？ expr1 : expr2.
仅以您的第一个示例为例，六行代码可以压缩为一行:
if (relativeYes.checked) {
document.getElementById('relativeConditions').style.display = 'block';
}
else {
document.getElementById('relativeConditions').style.display = 'none';
}
...变成一行...
relativeYes.checked ? document.getElementById('relativeConditions').style.display = 'block' : document.getElementById('relativeConditions').style.display = 'none';
除此之外，我建议缓存并存储您所有的 DOM 引用，因为您的 showData() 函数会在任何输入中的任何值发生更改时调用(例如，经常)。
最后，通常建议向元素添加/删除类作为隐藏或显示它的方式，而不是连续将 style.display 属性设置为 block 和 none。
此 CodePen 进行了所有这些增强，将 JS block 净化了将近一半的大小: https://codepen.io/anon/pen/YrxeXx
注意:在现实世界中，您不会像我在这里所做的那样在全局空间中声明所有这些变量，这只是为了方便。
关于javascript - 有没有更好的方法来显示和隐藏大量元素并取消选中隐藏的复选框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46517073/