Hide/Show div when radio checked/unchecked via a button-CodePudding

So I've done this code (there is some french words sorry :/ )

I succeeded to make that when you press on the top buttons it changes all the radios

I succeded to make that when you press on "oui" of the "Dyspnée" div, there is a NYHA div that appears.

The probleme is that when the "oui" of the "Dyspnée" div is checked via the top buttons, the NYHA div doesn't show up :,(

I've try multiple things but can't figure out how to do make it work :/ Any ideas why it doesn't show up when I press on the "oui" of the top buttons ?

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 >
  <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 >
  <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 >
    <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 >
  <div >
    <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>

CodePudding user response：

onchange events aren't fired when you change a property in JS, so your NYHAshow() function is not called since it is bound to onchange. However, you can manually trigger onchange with $.trigger

$("#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 >
  <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 >
  <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 >
    <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 >
  <div >
    <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>

CodePudding user response：

You have to call NYHAshow from your PulmOui function:

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