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

问题描述

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

I am looking, in the cleanest way possible to be able to take a simple yes or no question and test for which answer has been chosen.

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

For instance in this case if a "yes" I want it to return a value of "Continue" into a specified area (a 3 column table which has a question in the first, the radio buttons in the second, and I want it to update and display the answer in the third).

我的 JS 代码到目前为止:

My code for the JS stands thus far:

<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>

和正文(减去实际问题):

and the Body text (minus the actual question):

<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'，但就像我说的，更习惯于 java 而不是 javascript，完全更严格的语法.我同意，我只使用 ID 来尝试使用不同的方法让它工作，但它从来没有.现在有了一些建议，它只是给了我 undefined 无处不在.虽然我同意这最终会转向 jquery，但我不知道如何使用它，因此首先在 javascript 中弄清楚这一点.

Ok, fixed the 'funk' but like I said, more used to java than javascript, completely tougher syntax. I agree, I only used the ID thing to try and get this to work with a different method, but it never did. Now with some of the suggestions it is just giving me undefined everywhere. And while I agree this will eventually turn to jquery, I have NO clue how to work with it, hence figuring out this in javascript first.

推荐答案

一些事情:

document.getElementByID()

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

will always return the first element, as ID's are supposed to be unique.Instead, use:

document.getElementsByName('substance');

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

Next, in your loop, you are improperly referencing the array's members using the .length property. Try this instead:

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

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

Finally, in javascript, the '=' opertator is always an assignment statement. To do comparisons, always use '==':

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

此外，尽可能避免使用全局变量.这是工作代码，重构了一下:

Also, try to avoid global variables whenever possible.Here is the working code, refactored a bit:

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

这篇关于使用javascript检查是否选择了单选按钮并根据选择返回特定答案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！