使用纯 javascript:如果选中一个单选按钮,则只显示下一部分

Ben*_*tte 0 html javascript radio-button

我只想在用户选择第一部分中的单选按钮后才显示表单的第二部分。我试图单独使用 javascript 来做到这一点,但没有效果。我很确定问题在于在正确的时间触发该功能。如果我之后用按钮触发它,它就起作用了!但我希望它无需外部按钮即可自动触发。

这是 HTML:

<input type="radio" name="entreprise_ou_particulier" value="Vous êtes un particulier" id="particulier1">
<label for="particulier1">
    <span>
        Je suis un particulier
    </span>
</label>
    
<div class="item" id="declaration2">
    <input type="radio" name="choix_de_produit" value="Déclaration d'impôts" id="declaration1">
    <label for="declaration1">
        <span>
            Déclaration d'impôts
        </span>
    </label>
</div>
Run Code Online (Sandbox Code Playgroud)

和 Javascript:

if (document.getElementById("particulier1").checked) {
    document.getElementById("declaration2").style.display = 'block';
}
else {
    document.getElementById("declaration2").style.display = 'none';
}
Run Code Online (Sandbox Code Playgroud)

非常感谢!!!

小智 5

这是一个<input>,您可以使用该change事件。

let check = document.getElementById("particulier1")

check.addEventListener("change", myFunction)

function myFunction (event) {
    if (this.checked) {
         document.getElementById("declaration2").style.display = 'block';
    }
    else {
         document.getElementById("declaration2").style.display = 'none';
    }
}
Run Code Online (Sandbox Code Playgroud)

  • `check.addEventListener("change", myFunction)` 仅当主动检查 `#particulier1` 时才会触发,而不会在另一个单选按钮取消选中时触发。[事件委托](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation) 就像 `addEventListener("change", ({target}) =&gt; { if(target .matches("input[type='radio'][name='entreprise_ou_particulier']")){ checkRadio(); } });` 解决了这个问题,其中 `checkRadio` 是一个包含 OP 原始代码的函数。 (2认同)