单击单选选项后如何使函数执行？ JavaScript答案

【问题标题】：How to make function execute after radio option is clicked? JavaScript单击单选选项后如何使函数执行？ JavaScript
【发布时间】：2022-11-23 02:32:52
【问题描述】：

我想知道如何执行一个函数，例如在单击“是”选项时显示一个文本框。我该怎么做，因为 Yes 是 JS 中无线电输入类型的一部分？我更喜欢普通 javascript 中的答案。这会有很大帮助！谢谢你！

JavaScript

    document.querySelector("label[for=ediet]").style.opacity = "100%"; //RIGHT
    document.getElementById("edietq").style.opacity = "100%";
}



function init( ) {
    var f = document.getElementsByName("form1");
    f[0].addEventListener("submit", validateForm); 
    
    var yes =  document.querySelector("label[for=ediet]");
    yes.addEventListener("click", yesClicked);
    var showT = document.getElementById("edietq");
    showT.addEventListener("click", yesClicked);

}
window.onload = init; ```

**HTML**

<input type="radio" id="yes" name="option">

<label for="yes" id="yesq" value = "option">Yes</label><br><br>
<input type="radio" id="no" name="option">
<label for="No">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br> 
<input type="text" id="edietq" name="edietq"><br><br> <!-- Explain Diet-->

【问题讨论】：

标签： javascript html radio-button

【解决方案1】：

您可以创建一个显示为无的类

.hide{
  display: none
}

保留在输入中添加的 pre 隐藏

<input type="text" id="edietText" class="hide" name="edietq">

并创建一个删除此类的函数

const yesInput = document.getElementById("yes")

yesInput.addEventListener("click", yesClicked);

function yesClicked(){
  let textExp = document.getElementById("edietText");
  textExp.classList.remove('hide');
}

你也可以这样做：

const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");

yesInput.addEventListener("click", yesClicked);

noInput.addEventListener("click", noClicked);

function yesClicked(){
  textExp.classList.remove('hide');
}
function noClicked(){
  textExp.classList.add('hide');
}

const yesInput = document.getElementById("yes");
const noInput = document.getElementById("no");
const textExp = document.getElementById("edietText");

yesInput.addEventListener("click", yesClicked);

noInput.addEventListener("click", noClicked);

function yesClicked(){
  textExp.classList.remove('hide');
}
function noClicked(){
  textExp.classList.add('hide');
}

.hide{
  display: none
}

<input type="radio" id="yes" name="option">

<label for="yes" id="yesq" value = "option">Yes</label>
<br><br>
<input type="radio" id="no" name="option">
<label for="no">No</label><br><br>
<label for="ediet">If yes, explain your dietary restrictions</label><br> 
  <input type="text" id="edietText" class="hide" name="edietq">
<br><br> <!-- Explain Diet-->

【讨论】：

【解决方案2】：

使用 onclick 事件侦听器，如下所示：

document.getElementById("dark").addEventListener("click", (e) => {
  console.log(e.target.id)
  document.body.style.background = "black"
  document.body.style.color = "white"
});

document.getElementById("light").addEventListener("click", (e) => {
  console.log(e.target.id)
  document.body.style.background = "white"
  document.body.style.color = "black"
});

<label>Toggle Dark Mode</label>
<input type="radio" name="theme" id="dark" />

<label>Toggle Light Mode</label>
<input type="radio" name="theme" id="light" />

调整代码以适合您的用例。

【讨论】：