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

Question

我正在寻找能够以最简洁的方式回答简单的是或否的问题并测试已选择的答案。

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

到目前为止，我的 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="answerwrite"></div>
      <script type="text/javascript">
document.write("<td>" + writeAns() + "</td>")
</script>

</tr></table>

好的，修复了“funk”，但就像我说的，比 javascript 更习惯于 java，语法更严格。我同意，我只使用了 ID 来尝试让它使用不同的方法，但它从来没有这样做过。现在有了一些建议，它只是让我到处都不确定。虽然我同意这最终会转向 jquery，但我不知道如何使用它，因此首先在 javascript 中解决这个问题。

Answer 1

一些事情：

document.getElementByID() 

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

document.getElementsByName('substance');

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

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

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

    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();
};

Answer 2

如果您使用的是 JQuery，这非常容易。

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

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

漂亮又简单。