如何确定单选按钮组中的特定单选按钮是否被选中？答案

【问题标题】：How to determine if a specific radio button in a radio button group is checked?如何确定单选按钮组中的特定单选按钮是否被选中？
【发布时间】：2016-06-25 14:21:17
【问题描述】：

我的 HTML 表单中有一个单选按钮组：

<form action="handler.php">
  <p><b>a or b or c</b></p>
  <p><input type="radio" id="abc" name="answer" value="a1">1<Br>
  <input type="radio" id="abc" name="answer" value="a2">2<Br>
  <input type="radio" id="abc" name="answer" value="a3">3</p>
 </form>

我想检查一个特定的单选按钮（例如值为a1）是否被选中，如果是则显示图片：

<script>
function ShowPicture() {
  var word = document.getElementById("abc").value;

  if (word == "a1") {
      document.getElementById("demo").innerHTML = '<iframe src="http://picturesite.com/index" width="1024" height="720" align="left">';
  } 
}
</script>

如何确定单选按钮是否被选中，以便在用于显示图像的条件下使用它？

【问题讨论】：

id 必须是唯一的
使用更改事件监听器
看起来怎么样？
这不是一个教程服务。如果你不知道 javascript 事件监听器是如何工作的，那么你需要学习一些 JavaScript 初学者教程

标签： javascript html radio-button

【解决方案1】：

这对你有帮助：

<html>
    <head>
    </head>
    <body>
        <form action="handler.php">
              <p><b>a or b or c</b></p>
            <p><input type="radio" class="abc" name="answer" value="a1" onchange="ShowPicture()">1</p>
            <p><input type="radio" class="abc" name="answer" value="a2" onchange="ShowPicture()">2</p>
            <p><input type="radio" class="abc" name="answer" value="a3" onchange="ShowPicture()">3</p>
        </form>
        <div id="demo"></div>
        <script>
           function ShowPicture() {
              var word = document.getElementsByClassName("abc");
              var len = word.length;
               for(var i=0;i< len-1; i++) {
                   if(word[i].value == "a1" && word[i].checked)
                   document.getElementById("demo").innerHTML = '<iframe src="http://picturesite.com/index" width="1024" height="720" align="left">'
                   
               }
            }
        </script>
    </body>
</html>

【讨论】：

哇！太酷了！是否有可能以某种方式创建 if 语句？例如连接两个复选框语句？来自不同的输入？
如果 checkbox1 或 checkbox2 处于活动状态，您想显示 iframe？
一点也不。例如，如果我有 2 个不同的复选框，并且 if 语句将连接它们。例如，如果第一个复选框的 a1 和另一个复选框的 b1 处于活动状态，则显示图片
是的，有可能。

【解决方案2】：

id 必须是唯一的，所以您的代码不起作用！但是我有两种方法可以解决您的问题。第一个是按名称获取，第二个是通过标记名获取。这两个函数返回节点列表，因此需要循环...

//var word = document.getElementsByName("answer"); //get by name
 var word = document.getElementsByTagName("input");//get element name
 for(var i =0;i<word.length;i++){
  if(word[i].value == "a1") {
  document.getElementById("demo").innerHTML = '<iframe src="http://picturesite.com/index" width="1024" height="720" align="left">';
  } 
}

【讨论】：