检查单选按钮值的语法

Posted

技术标签:

【中文标题】检查单选按钮值的语法【英文标题】：Syntax for checking value of radio button 【发布时间】：2021-02-09 06:53:13 【问题描述】：

我尝试使用 javascript 检查无线电输入的值，这是我代码中的一个函数中的 if 语句：

 if (understanding1.value == yes )
  document.getElementById("result1Y").innerhtml = 
  document.getElementById('name1').value;

我在 if (understanding1.value == yes ) do ... 的语法上遇到问题...

这是我的代码应该做的事情：

用户输入一些文本 > 文本的 id = "name1" 用户选择以下选项之一 > 是；的种类;否 用户点击进入按钮 > 函数organizeUnderstanding1() 假设将输入name1 组织到result1H 中；结果1M；结果1E；取决于他们使用无线电输入选择的内容

这是我的代码的完整版本：

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1H"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1Y"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() 
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1.value == yes )
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
               else if (understanding1.value == kinda )
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
               else if (understanding1.value == no )
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
               else 
                break;
              
       
       
    
   
      </script>

【问题讨论】：

您需要报价：== 'yes' 对于这类问题，包含错误消息和/或意外行为通常很有用。 【参考方案1】：

您正在检查您从未分配过的变量而不是字符串。您需要在要检查字符串相等性的每个值周围加上引号。

 <div>
        <input type="text" id="name1">
    </div>

 <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" name="understanding1" value="yes" required>
        <label for="yes">yes</label><br>
        <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
        <label for="kinda">kind of</label><br>
        <input type="radio" id="no1" name="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick=organizeUnderstanding1()>Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p><span id="result1Y"></span></p>
        <p>Here's what you said KIND OF to:</p>
        <p><span id="result1K"></p>  
        <p>Hereś what you said NO to:</p>
        <p><span id="result1N"></span></p>
      </div>
    
    
      <script>
     
      
      
      function organizeUnderstanding1() 
     var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
              if (understanding1== 'yes' )
                 document.getElementById("result1Y").innerHTML =                        document.getElementById('name1').value;
               else if (understanding1 == 'kinda' )
                document.getElementById("result1K").innerHTML =                         document.getElementById('name1').value;
               else if (understanding1== 'no' )
                document.getElementById("result1N").innerHTML =                         document.getElementById('name1').value;
               else 
                break;
              
       
       
    
   
      </script>

【讨论】：

它仍然不起作用，我使用您的反馈来更新代码 这里是一个尝试它的编辑器的链接，但是当我运行它时没有显示错误，根本没有任何反应，做你知道这是为什么吗？这是 w3schools try it 编辑器的链接：w3schools.com/code/tryit.asp?filename=GK4S00OT9NX8 另外：感谢您的帮助！ @hp672 刚刚测试了您的编辑器，这是由于我们检查值的方式。变量understanding1 已经检查了.value，所以当我们检查它是否等于“是”或“否”时，我们不需要检查understanding1.value，而是只需要检查understanding1。另一个错误是您的结果搜索为result1H 而不是result1N。更新了我的答案，希望对您有所帮助！ @hp672 这是 w3schools 上的工作演示。我删除了有点让它更容易阅读和理解：w3schools.com/code/tryit.asp?filename=GK5PS82XFMKP【参考方案2】：

您的问题从以下代码块开始：

 if (understanding1.value == yes )
  document.getElementById("result1Y").innerHTML = 
  document.getElementById('name1').value;

这是试图将understanding1.value 的值与名为yes 的变量 的值进行比较。您要做的是将understanding1.value 的值与字符串 'yes' 进行比较，因此您需要在其周围添加引号：

 if (understanding1.value == 'yes')
  ...

我认为这回答了你的问题。但是还有一些其他的事情你应该改变：

    修复代码中的一些其他错误（使用understanding1 代替understanding1.value 并使用正确的跨度ID（result1H、result1K 和result1Y 代替result1Y、result1K 和@987654335 @，分别）。 使用textContent 而不是innerValue。否则，该值将被解释为 HTML（这就是名称 innerHTML 包含“HTML”的原因）。使用您的代码，如果用户在文本框中输入&lt;script&gt;doSomethingEvil();&lt;/script&gt; 并单击按钮，那么它将执行函数doSomethingEvil()。 摆脱 else/break 位 - 它实际上并没有做任何事情。 将所有if 和else if 语句转换为switch 语句。 修正缩进和其他间距，让您的代码更易于阅读。 在执行任何其他操作之前检查用户是否实际输入了有效输入。我之所以这么说是因为这行：&lt;button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();"&gt;Enter&lt;/button&gt;，显然，一旦用户单击按钮，它就应该隐藏所有输入。由于不清楚该页面应该如何整体工作，所以我没有完成这部分。

完整代码：

<div>
    <input type="text" id="name1">
</div>

<div id="understandingCheck1">
    <p>Question 1?</p>
    <input type="radio" id="yes1" name="understanding1" value="yes" required>
    <label for="yes">yes</label><br>
    <input type="radio" id="kindOf1" name="understanding1" value="kindOf">
    <label for="kinda">kind of</label><br>
    <input type="radio" id="no1" name="understanding1" value="no">
    <label for="no">no</label><br><br>
    <button onclick="hideUnderstandingCheckDiv(); organizeUnderstanding1();">Enter</button>
</div>

<div id="workDiv">
    <p>Here´s what you said YES to:</p>
    <p><span id="result1H"></span></p>
    <p>Here's what you said KIND OF to:</p>
    <p><span id="result1K"></p>  
    <p>Hereś what you said NO to:</p>
    <p><span id="result1Y"></span></p>
</div>

<script>
    function organizeUnderstanding1() 
        var understanding1 = document.querySelector('input[name = "understanding1"]:checked').value;
        
        switch (understanding1.value 
            case 'yes':
                document.getElementById("result1H").textContent = document.getElementById('name1').value;
                break;
            case 'kinda':
                document.getElementById("result1K").textContent = document.getElementById('name1').value;
                break;
            case 'no':
                document.getElementById("result1Y").textContent = document.getElementById('name1').value;
                break;
        
    
</script>

我只想说：我很震惊没有人评论innerHTML的使用。这似乎是一种初学者陷阱 - 也是严重的安全漏洞 - 经验丰富的开发人员需要在每次看到它时发表评论。

【讨论】：

【参考方案3】： 

 //you select all radio input 
     var selectedRadioVal;
     var radio1 = document.querySelector("#yes1")
     var radio2 = document.querySelector("#no1")
    
      //when radio1 is clicked
     radio1.onclick = function()
     radio2.checked=false
     selectedRadioVal =radio1.value
     
      //when radio2 is clicked
      radio2.onclick = function()
     radio1.checked=false
     selectedRadioVal =radio2.value
     
      //after clicking enter
      function organizeUnderstanding1() 
      //get text input value (name)
    let inputname = document.getElementById('name1').value;
     
              if (selectedRadioVal == 'yes' )
                 document.querySelector("#result1Y").innerHTML =   inputname                     
                 selectedRadioVal=""
                if (selectedRadioVal == 'no' )
                document.querySelector("#result1H").innerHTML =  inputname
                selectedRadioVal=""
               else 
               // return;
              
       
       
    
<div>
        <input type="text" id="name1">
    </div>

    <div id="understandingCheck1">
        <p>Question 1?</p>
        <input type="radio" id="yes1" class="understanding1" value="yes" >
        <label for="yes">yes</label><br>
        <input type="radio" id="no1" class="understanding1" value="no">
        <label for="no">no</label><br><br>
        <button onclick=organizeUnderstanding1()>Enter</button>
    </div>
    
      <div id="workDiv">
        <p>Here´s what you said YES to:</p>
        <p id="result1Y"></p>
        <p>Hereś what you said NO to:</p>
        <p id="result1H"></p>
      </div>

【讨论】：

这个答案有一个错误：您需要在每个&lt;input type="radio"&gt; 上包含name 属性；否则用户可以同时选择它们。 我知道，但由于缺少问题的详细信息，我犹豫是否要添加代码。我之前提到过这个。“你也使用 document.querySelectorAll('.understanding1')..checked = false 和 for 循环取消选择单选按钮”所以你必须在 onclick 之前在 for 循环中添加“understanding1[i].checked=false”功能 为了澄清，我写得更简单。我更新了代码现在试试 什么？我们有一个正确的方法来做到这一点：name 属性。问题中已经存在 name 属性。你删除了它。为什么？为什么？为什么？即使脚本被禁用或有错误，它也将始终有效。为什么要尝试使用自己的脚本？

以上是关于检查单选按钮值的语法的主要内容，如果未能解决你的问题，请参考以下文章

MVC3 单选按钮验证

jQuery如何获取选中单选按钮radio的值

Reactjs：我正在根据状态检查单选按钮，但在选中一个单选按钮时无法单击其他单选按钮

如何通过检查另一个单选按钮来设置选中的单选按钮

当单选按钮为runat =“服务器”时使用jQuery检查单选按钮？

无法检查单选按钮并获取单选按钮的值