通过按钮选中/取消选中无线电时隐藏/显示 div

Question

所以我已经完成了这段代码（抱歉有一些法语单词：/）

我成功地做到了，当你按下顶部的按钮时，它会改变所有的收音机

当您按下“Dyspnée”div 的“oui”时，我成功地做到了这一点，出现了一个 NYHA div。

问题是，当通过顶部按钮检查“Dyspnée”div 的“oui”时，NYHA div 没有显示:,(

我已经尝试了多种方法，但无法弄清楚如何让它发挥作用：/ 知道为什么当我按下顶部按钮的“oui”时它没有出现吗？

 function PulmOui() { $("#dyspneePulmOui").prop("checked", true); $("#thoraxOui").prop("checked", true); } function PulmNon() { $("#dyspneePulmNon").prop("checked", true); $("#thoraxNon").prop("checked", true); } function PulmNT() { $("#dyspneePulmNT").prop("checked", true); $("#thoraxNT").prop("checked", true); } function NYHAshow() { document.getElementById("NYHA").style.display = "block"; } function NYHAhide() { document.getElementById("NYHA").style.display = "none"; }

 #NYHA { display: none; }.tripleChoix { display: flex; overflow: hidden; }.tripleChoix input { position: absolute;important: clip, rect(0, 0, 0; 0). }:tripleChoix label { background-color; #f9f7f7: color, rgba(0, 0, 0. 0;6): font-size; 12px: line-height; 1: text-align; center: padding; 4px 8px: margin-right; -1px: box-shadow, inset 0 0 2px rgba(0, 0, 0. 0;3): transition. all 0;1s ease-in-out. }:tripleChoix label:hover { cursor; pointer. }:tripleChoix input:checked + label { background-color; #3f72af: color; #f9f7f7. }:tripleChoix label:first-of-type { border-radius; 4px 0 0 4px. }:tripleChoix label:last-of-type { border-radius; 0 4px 4px 0. }:coordination label { background-color; #112d4e: color; #f9f7f7: box-shadow, inset 0 0 2px rgba(255, 255, 255; 1). }:coordination label:active { background-color; #f9f7f7: color, rgba(0, 0, 0. 0;6); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tripleChoix coordination"> <input id="pulmOui" name="pulm" type="button" onclick="PulmOui()" /> <label for="pulmOui">Oui</label> <input id="pulmNon" name="pulm" type="button" onclick="PulmNon()" /> <label for="pulmNon">Non</label> <input id="pulmNT" name="pulm" type="button" onclick="PulmNT()" /> <label for="pulmNT">NT</label> </div> <strong>Dyspnée</strong> <div class="tripleChoix"> <input id="dyspneePulmOui" name="dyspneePulm" type="radio" onchange="NYHAshow();" /> <label for="dyspneePulmOui">Oui</label> <input id="dyspneePulmNon" name="dyspneePulm" type="radio" onchange="NYHAhide();" /> <label for="dyspneePulmNon">Non</label> <input id="dyspneePulmNT" name="dyspneePulm" type="radio" onchange="NYHAhide();" checked="checked" /> <label for="dyspneePulmNT">NT</label> </div> <div id="NYHA"> <strong>NYHA</strong> <div class="tripleChoix"> <input id="NYHAa" name="NYHA" type="radio" /> <label for="NYHAa">I</label> <input id="NYHAb" name="NYHA" type="radio" /> <label for="NYHAb">II</label> <input id="NYHAc" name="NYHA" type="radio" /> <label for="NYHAc">III</label> <input id="NYHAd" name="NYHA" type="radio" /> <label for="NYHAd">IV</label> </div> </div> <strong>Douleur thoracique</strong> <div class="col-lg-5"> <div class="tripleChoix"> <input id="thoraxOui" name="thorax" type="radio" /> <label for="thoraxOui">Oui</label> <input id="thoraxNon" name="thorax" type="radio" /> <label for="thoraxNon">Non</label> <input id="thoraxNT" name="thorax" type="radio" checked="checked" /> <label for="thoraxNT">NT</label> </div>

Answer 1

当您更改 JS 中的属性时，不会触发onchange事件，因此不会调用您的NYHAshow() function，因为它绑定到onchange 。 但是，您可以使用$.trigger手动触发onchange

$("#dyspneePulmOui").prop("checked", true).trigger("change");

 function PulmOui() { $("#dyspneePulmOui").prop("checked", true).trigger("change"); $("#thoraxOui").prop("checked", true); } function PulmNon() { $("#dyspneePulmNon").prop("checked", true); $("#thoraxNon").prop("checked", true); } function PulmNT() { $("#dyspneePulmNT").prop("checked", true); $("#thoraxNT").prop("checked", true); } function NYHAshow() { document.getElementById("NYHA").style.display = "block"; } function NYHAhide() { document.getElementById("NYHA").style.display = "none"; }

 #NYHA { display: none; }.tripleChoix { display: flex; overflow: hidden; }.tripleChoix input { position: absolute;important: clip, rect(0, 0, 0; 0). }:tripleChoix label { background-color; #f9f7f7: color, rgba(0, 0, 0. 0;6): font-size; 12px: line-height; 1: text-align; center: padding; 4px 8px: margin-right; -1px: box-shadow, inset 0 0 2px rgba(0, 0, 0. 0;3): transition. all 0;1s ease-in-out. }:tripleChoix label:hover { cursor; pointer. }:tripleChoix input:checked + label { background-color; #3f72af: color; #f9f7f7. }:tripleChoix label:first-of-type { border-radius; 4px 0 0 4px. }:tripleChoix label:last-of-type { border-radius; 0 4px 4px 0. }:coordination label { background-color; #112d4e: color; #f9f7f7: box-shadow, inset 0 0 2px rgba(255, 255, 255; 1). }:coordination label:active { background-color; #f9f7f7: color, rgba(0, 0, 0. 0;6); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tripleChoix coordination"> <input id="pulmOui" name="pulm" type="button" onclick="PulmOui()" /> <label for="pulmOui">Oui</label> <input id="pulmNon" name="pulm" type="button" onclick="PulmNon()" /> <label for="pulmNon">Non</label> <input id="pulmNT" name="pulm" type="button" onclick="PulmNT()" /> <label for="pulmNT">NT</label> </div> <strong>Dyspnée</strong> <div class="tripleChoix"> <input id="dyspneePulmOui" name="dyspneePulm" type="radio" onchange="NYHAshow();" /> <label for="dyspneePulmOui">Oui</label> <input id="dyspneePulmNon" name="dyspneePulm" type="radio" onchange="NYHAhide();" /> <label for="dyspneePulmNon">Non</label> <input id="dyspneePulmNT" name="dyspneePulm" type="radio" onchange="NYHAhide();" checked="checked" /> <label for="dyspneePulmNT">NT</label> </div> <div id="NYHA"> <strong>NYHA</strong> <div class="tripleChoix"> <input id="NYHAa" name="NYHA" type="radio" /> <label for="NYHAa">I</label> <input id="NYHAb" name="NYHA" type="radio" /> <label for="NYHAb">II</label> <input id="NYHAc" name="NYHA" type="radio" /> <label for="NYHAc">III</label> <input id="NYHAd" name="NYHA" type="radio" /> <label for="NYHAd">IV</label> </div> </div> <strong>Douleur thoracique</strong> <div class="col-lg-5"> <div class="tripleChoix"> <input id="thoraxOui" name="thorax" type="radio" /> <label for="thoraxOui">Oui</label> <input id="thoraxNon" name="thorax" type="radio" /> <label for="thoraxNon">Non</label> <input id="thoraxNT" name="thorax" type="radio" checked="checked" /> <label for="thoraxNT">NT</label> </div>

Answer 2

您必须通过 PulmOui function 致电 NYHAshow：

function PulmOui() {
    $("#dyspneePulmOui").prop("checked", true);
    $("#thoraxOui").prop("checked", true);
   NYHAshow();
}