隐藏/可见复选框，选择并获取值

Question

我试图制作一个隐藏的复选框，并在选择单选按钮后显示它

我希望隐藏复选框。并且只有当我选择单选按钮时才可见。最后一件事，我想获得它们的值

这是代码：

function apparition() {
  document.getElementById("test").style.display = "inline";
}

<div style="align-content: left;">
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
                <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="Sur dalle - Pose à la française" checked>
                <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
              </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
                <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="Contre dalle - Pose à l'anglaise" >
                <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
              </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
                <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="Sur acrotère - pose à la Française" onClick="apparition()">
                <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
              </label>
</div>
<p id="test" style="position: absolute;
margin-left: 10%; display:none;">
  <label>
    <input type="checkbox" />
    <span>Passage devant dalle</span>
  </label>
</p>

这是屏幕截图：

Answer 1

喜欢这个

我将点击委托给容器（我给了它一个ID）

window.addEventListener("load", function() {
  document.getElementById("radioContainer").addEventListener("click", function() {
    document.getElementById("test").style.display = document.getElementById("option-3").checked ? "inline" : "none";
  });
});

#test {
  position: absolute;
  margin-left: 10%;
  display: none;
}

<div style="align-content: left;" id="radioContainer">
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
    <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="Sur dalle - Pose à la française" checked />
      <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
    </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
    <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="Contre dalle - Pose à l'anglaise" />
    <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
  </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
    <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="Sur acrotère - pose à la Française" />
    <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
  </label>
</div>
<p id="test">
  <label>
    <input type="checkbox" />
    <span>Passage devant dalle</span>
  </label>
</p>

Answer 2

尝试以下代码段。单击第三个单选按钮后，将显示该复选框，并在选择更改时将其隐藏。

var radioOption3 = document.getElementById('option-3');
var radioOption1 = document.getElementById('option-1');
var radioOption2 = document.getElementById('option-2');
radioOption3.addEventListener('change', apparition);
radioOption2.addEventListener('change', apparition);
radioOption1.addEventListener('change', apparition);

function apparition() {

  var x = document.getElementById('apparitioncontainer');
  if (x.style.display === 'block') {
    x.style.display = 'none';
  } else {
  if(radioOption3.checked)
    x.style.display = 'block';
  }
}

<div style="align-content: left;">
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
            <input type="radio" id="option-1" class="mdl-radio__button" name="options" value="Sur dalle - Pose à la française" checked>
            <span class="mdl-radio__label">Sur dalle - Pose à la française</span>
          </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-2">
            <input type="radio" id="option-2" class="mdl-radio__button" name="options" value="Contre dalle - Pose à l'anglaise" >
            <span class="mdl-radio__label">Contre dalle - Pose à l'anglaise</span>
          </label>
  <br>
  <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-3">
            <input type="radio" id="option-3" class="mdl-radio__button" name="options" value="Sur acrotère - pose à la Française" >
            <span class="mdl-radio__label">Sur acrotère - pose à la Française</span>
          </label>
</div>
<p style="position: absolute;  margin-left: 10%;display:none" id="apparitioncontainer">
  <label>
            <input type="checkbox"  id="apparition"/>
            <span>Passage devant dalle</span>
          </label>
</p>