是否有更好的方法来显示和隐藏许多元素并取消选中隐藏的复选框？

本文介绍了是否有更好的方法来显示和隐藏许多元素并取消选中隐藏的复选框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我有这个部分代码，正如你所看到它包含许多复选框，无线电和隐藏类。我试着按照我所知写的，但是当条件列表变得更长时它变得复杂并且看起来很难编写代码。所以我的问题是，是否有更好的方式来显示和隐藏许多类，并隐藏清晰的chexboex和无线电。 我尝试过： 功能 showData（）{ if （relativeYes.checked）{ document .getElementById（' relativeConditions'）。style.display = ' 块'; } else { document .getElementById（' relativeConditions'）。style.display = ' none'; } if （relativeNo.checked）{ document 。 getElementById（' verification'）。style.display = ' block'; } else { document .getElementById（' 验证'）。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 = ' 块'; } 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 = ' 无; } if （yes.checked&& female.checked）{ document .getElementById（' femaleDiagnosis'）。style.display = ' block'; } else { document .getElementById（' femaleDiagnosis'）。style.display = ' none'; } 如果（maleMlm.checked === true && maleDiagnosis.style.display == ' block'）{ document .getElementById（' output'）。innerHTML = ' DO'; } 其他 如果（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'; } 其他 如果（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）; < ！DOCTYPE html > < html lang = zh > < ; head > < meta charset = UTF-8 > < meta name = viewport content = width = device-width，initial-scale = 1.0 > < meta http-equiv = X-UA兼容 content = ie = edge > < title > 文档< / title > < link rel = 样式表 href = css / style.css > < / head > < body > < div id = container onchange = showData（）; > < div id = relative > Lorem ipsum dolor，坐在旁边的精神上。 Eaque，laboriosam？ 是< 输入 id = relativeYes 类型 = radio 名称 = relative onchange = clearRadios（'none'） > 否< 输入 id = relativeNo type = radio name = relative > < / div > < div id = relativeConditions > 1. Lorem ipsum dolor sit amet consectetur，adipisicing elit。 < 输入 类型 = radio 名称 = relaiveConditionsCheck > < br > 2. Lorem ipsum dolor sit。**** < 输入 type = radio name = relaiveConditionsChe ck > < br > 3. Lorem ipsum dolor sit amet consectetur。< input type = radio name = relaiveConditionsCheck > < br > 4. Lorem ipsum dolor sit amet consectetur adipisicing。< input t ype = radio 名称 = relaiveConditionsCheck > < / div > < div id = 无 > < div id = 验证 & gt; Lorem ipsum dolor sit？< br > 是< 输入 id = 是 type = radio name = 验证 > 否< 输入 id = no type = radio 名称 = 验证 > < br > < / div > < div id = profiling > Lorem ipsum dolor sit amet？ 是< 输入 id = profilingYes 名称 = 分析 type = radio > 否 < 输入 id = profilingNo name = 分析 type = radio > < / div > < div id = secondPart > < div id = 性别 > GEnder：男性< / label > < 输入 id = 男性 类型 = radio 名称 = 性别 > 女 < / label > < 输入 id = female type = radio name = 性别 > < br > < / div > < div id = maleDiagnosis > Mlm < 输入 id = maleMlm type = 复选框 > Prt < input id = malePrt type = 复选框 > Pn < 输入 id = malePn type = 复选框 > < br > < / div > < p id = jaw > Lorem ipsum dolor疮？ 是< 输入 id = jawYes 类型 = radio 名称 = jaw > 否 < 输入 id = jawNo type = radio name = jaw > < / p > < div id = femaleDiagnosis > Mm < 输入 type = 复选框 > 或< 输入 type = 复选框 > Pan < input 输入 = 复选框 > < br > < / div > < / div > < / div > < span style = color：red onkeyup = showData（） > 输出：< / span > < span id = 输出 > </span> </div> </body> <script src=\"main.js\"></script> </html> #jaw, #age, #profiling, #secondPart, #verification, #maleDiagnosis, #femaleDiagnosis, #relativeConditions, #gender { display: none; } 解决方案 It seems the business logic only makes it bulkier.. However, you can use ternary operator and Jquery to make it look precise and pretty.. I have shown the ternary operators here.. <pre>function showData() { document.getElementById('relativeCon ditions').style.display = (relativeYes.checked) ? 'block' : 'none'; document.getElementById('verification').style.display = (relativeNo.checked) ? 'block' : 'none'; document.getElementById('gender').style.display = (no.checked) ? (setOutPut('Nope'), 'none') : (setOutPut(''), 'block'); document.getElementById('profiling').style.display = (yes.checked) ? 'block' : 'none'; document.getElementById('secondPart').style.display = (profilingYes.checked) ? (setOutPut('Do'), 'none') : 'block'; if (profilingNo.checked) { document.getElementById('gender').style.display = 'block'; } document.getElementById('maleDiagnosis').style.display = (yes.checked && male.checked) ? 'block' : 'none'; document.getElementById('femaleDiagnosis').style.display = (yes.checked && female.checked) ? 'block' : 'none'; if (maleMlm.checked === true && maleDiagnosis.style.display == 'block') { setOutPut('Do') } else if (malePrt.checked) { setOutPut('OTHER') } document.getElementById('jaw').style.display = (malePn.checked === true && maleMlm.checked === false) ? 'block' : 'none'; if (maleMlm.checked === false && malePn.checked === true && malePrt.checked === true) { setOutPut(''); } document.getElementById('output').innerHTML = (jawYes.checked) ? 'DO' : '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 setOutPut(text) { document.getElementById('output').innerHTML = text; } 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.What I have tried: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);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/style.css"></head><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" onkeyup="showData()">Output:</span><span id="output"> </span></div></body><script src="main.js"></script></html>#jaw,#age,#profiling,#secondPart,#verification,#maleDiagnosis,#femaleDiagnosis,#relativeConditions, #gender { display: none;} 解决方案 It seems the business logic only makes it bulkier.. However, you can use ternary operator and Jquery to make it look precise and pretty..I have shown the ternary operators here..<pre>function showData() { document.getElementById('relativeConditions').style.display = (relativeYes.checked) ? 'block' : 'none'; document.getElementById('verification').style.display = (relativeNo.checked) ? 'block' : 'none'; document.getElementById('gender').style.display = (no.checked) ? (setOutPut('Nope'), 'none') : (setOutPut(''), 'block'); document.getElementById('profiling').style.display = (yes.checked) ? 'block' : 'none'; document.getElementById('secondPart').style.display = (profilingYes.checked) ? (setOutPut('Do'), 'none') : 'block'; if (profilingNo.checked) { document.getElementById('gender').style.display = 'block'; } document.getElementById('maleDiagnosis').style.display = (yes.checked && male.checked) ? 'block' : 'none'; document.getElementById('femaleDiagnosis').style.display = (yes.checked && female.checked) ? 'block' : 'none'; if (maleMlm.checked === true && maleDiagnosis.style.display == 'block') { setOutPut('Do') } else if (malePrt.checked) { setOutPut('OTHER') } document.getElementById('jaw').style.display = (malePn.checked === true && maleMlm.checked === false) ? 'block' : 'none'; if (maleMlm.checked === false && malePn.checked === true && malePrt.checked === true) { setOutPut(''); } document.getElementById('output').innerHTML = (jawYes.checked) ? 'DO' : '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 setOutPut(text) { document.getElementById('output').innerHTML = text; } 这篇关于是否有更好的方法来显示和隐藏许多元素并取消选中隐藏的复选框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！