使用javascript检查是否选择了单选按钮，并根据选择返回特定答案

Using javascript to check if a radio button is selected and return a specific answer based on the selection

本文关键字：选择 返回 答案 检查 javascript 是否 单选按钮 使用      更新时间：2023-09-26

我正在以最干净的方式寻找一个简单的是或否问题，并测试选择了哪个答案。

例如，在这种情况下，如果"是"，我希望它将值"继续"返回到指定区域（一个三列表，第一列有一个问题，第二列有单选按钮，第三列更新并显示答案）。

到目前为止，我的JS代码是：

<script type="text/javascript">
var answer = 'place-holder';
var user_input;

function checkForm() 
{
    var substanceab = document.getElementById('Sub');
    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab.length[i].checked)
        {
            user_input = substanceab.length[i].value;
        }
    }
    if (user_input ="yes")
    {
        return answer = "Continue";
    }
    else if (user_input ="no")
    {
        return answer = "Provide Alternate Referral";
    }
    else
    {
        return;
    }   
};
function writeAns()
{
    document.getElementById('answerwrite').innerHTML = checkForm[user_input];
};
</script>

正文（减去实际问题）：

<table class="table table-bordered">
 <tr>
  <td width="58%"><center><strong>Required:</strong></center></td>
  <td width="19%"></td>
  <td width="23%"><center><u><strong>___________</strong></u></center></td>
  </tr>
  <tr>
   <td> <span class="sub depend"> <strong><i>_________</i> </strong></span></td>
   <td> <span class="sub depend ans">
     <form name="Substance">
      <label class="radio inline">
        <input type="radio" value="yes" name="substance" onclick="writeAns()">
          yes </label>
      <label class="radio inline">
        <input type="radio" value="no" name="substance" onclick="writeAns()">
          no </label> </form></span></td>
          <div id="answerswerwrite"></div>
      <script type="text/javascript">
document.write("<td>" + writeAns() + "</td>")
</script>
</tr></table>

好吧，修复了"funk"，但正如我所说，更习惯于java而不是javascript，语法更加强硬。我同意，我只是用ID的东西来尝试用不同的方法来实现这一点，但从来没有。现在有了一些建议，它只是让我到处都不确定。虽然我同意这最终会转向jquery，但我不知道如何使用它，因此首先要用javascript来解决这个问题。

几件事：

document.getElementByID()

将始终返回第一个元素，因为ID应该是唯一的。相反，使用：

document.getElementsByName('substance');

接下来，在循环中，您使用.length属性不正确地引用了数组的成员。试试这个：

    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab[i].checked)
        {
            user_input = substanceab[i].value;
        }
    }

最后，在javascript中，'='operator始终是一个赋值语句。要进行比较，请始终使用"=="：

    if (user_input == "yes")
    {
        return answer = "Continue";
    }
    else if (user_input =="no")
    {
        return answer = "Provide Alternate Referral";
    }
    else
    {
        return;
    }

此外，尽可能避免全局变量。这是经过一点重构的工作代码：

<input type="radio" value="no" id= "Sub" name="substance" onclick="writeAns()">
function checkForm() 
{
    var user_input;
    var substanceab = document.getElementsByName('substance');
    for (i = 0; i < substanceab.length; i++)
    {
        if(substanceab[i].checked)
        {
            user_input = substanceab[i].value;
        }
    }
    if (user_input == "yes")
    {
        return "Continue";
    }
    else if (user_input =="no")
    {
        return "Provide Alternate Referral";
    }
    else
    {
        return;
    }   
};
function writeAns()
{
    document.getElementById('answerwrite').innerHTML = checkForm();
};

如果您使用的是JQuery，则非常简单。

确保您的元素具有相同的"名称"属性并使用：

var RadioGroupResult = $('input[name="MyRadioGroupNameHere"]:checked').val();

漂亮又简单。

相关文章：