时间戳

首页 > 解决方案 > 香草javascript中的单选按钮检查不起作用

javascript - 香草javascript中的单选按钮检查不起作用

问题描述

我的单选按钮检查不起作用。谁能帮我解决这个问题？我想检查单选按钮是否被选中。如果未选中，那么我希望该程序发出警报。但是在这个程序中，只要未选中单选按钮，我就不会收到警报。

 <div>
              <label for="gender">Gender: </label>
              <input type="radio" name="myRadio"> Male
              <input type="radio" name="myRadio"> Female
              <input type="radio" name="myRadio"> Other
          </div>

单选按钮检查功能如下：

function radioCheck(){
              var radio = document.forms["myForm"]["myRadio"].value;
    
                  for (var i=0; i<radio.length; i++) {
                    if (radio[i].checked){
                    break;
                  }else
                  {
                    alert("No radio button is checked");
                  }
              }
    
        }

标签： javascripthtml

解决方案

好的，这是工作代码：

function radioCheck(){
  const radioList = document.getElementsByName("myRadio")
  let notChecked = false;
  
  for(let i = 0; i < radioList.length; i ++){
    if(radioList[i].checked){
        return;
    } else {
        notChecked = true;
    }
   
  }

   if(notChecked){
      alert("No radio button is checked")
    }
}

radioCheck()

解释：

  • 首先，您必须通过 using 获取所有输入，document.getElementsByName因为它们唯一相同的是name属性，name="myRadio"在此示例中
  • 第二件事我添加了变量notChecked，该变量在初始时为假，因此当它将遍历所有输入并看到其中一个未选中时是否会显示警报
  • 然后你只需执行正常的 for 循环，遍历所有元素并检查它们是否被检查
  • 如果其中一个被选中，它只会停止 for 循环并且不返回任何内容，否则它会设置notChecked = true
  • 循环后我只检查notChecked值是否为真，如果是则显示警报
  • 最后也是重要的事情 - 你必须至少运行一次这个函数才能执行它，所以你只需radioCheck()在最后添加
  • 我还在html中添加了这部分<button onclick={radioCheck()} > run again </button>

所以单击按钮后，"run again"您可以再次使用它（仅用于测试）

这是工作示例：

关联

希望我的回答对您有所帮助:) 如果您有任何问题，请提出

推荐阅读