Question

我正在为班级提供给我的html代码编写一个验证函数，但除添加标题和脚本外，不允许更改html代码。我还处于初期阶段，所以我还不知道如何使用jQuery，并且希望帮助您验证多个单选按钮。

我尝试在此网站和许多其他网站上寻找答案，但似乎找不到。我尝试了多种代码，但我怀疑它们都是由jQuery制成的。

html的输入

<input type = "radio" name = "radNewsletter" value = "" />Health and Wellness<br />
<input type = "radio" name = "radNewsletter" value = "" />Creative Writing<br />
<input type = "radio" name = "radNewsletter" value = ""/>Gardening

现有验证

    function validateForm() {
        var x = document.forms["frmNews"]["txtName"].value;
        if (x == "") {
            alert ("Name must be filled out.");
            return false;
            }
        var y = document.forms["frmNews"]["txtEmail"].value;
        if (y == "") {
            alert ("Email must be filled out.");
            return false;
            }

按下提交按钮时，除了表单验证外，我无法获得任何其他输出，即使现有的验证应该已经停止了它。

Answer 1

我发现radNewsletter是您表单中的通用名称。为了验证单选按钮的表单，您可以使用以下代码。

function validateForm() {
        var radios = document.getElementsByName("radNewsletter");
        var formValid = false;

        var i = 0;
        while (!formValid && i < radios.length) {
            if (radios[i].checked) formValid = true;
            i++;        
        }

        if (!formValid) alert("Must check some option!");
        console.log(formValid)
        return formValid;
    }

<input type = "radio" name = "radNewsletter" value = "" />Health and Wellness<br />
<input type = "radio" name = "radNewsletter" value = "" />Creative Writing<br />
<input type = "radio" name = "radNewsletter" value = ""/>Gardening

<br />
<button onclick="validateForm()">Validate
</button>

Answer 2

function validateForm() {

        var radios = document.getElementsByName("radNewsletter");

        if(!radios.checked)
        {
          alert("we are testing")
        }

         if(radios.checked = true){
           alert("your checking the boxs")
         }
}

Answer 3

使用document.querySelector和pusedo选择器checked。此行document.querySelector('input[name="radNewsletter"]:checked')将给出第一个单选按钮，其名称为radNewsletter并被选中。单击按钮时，请检查该值是否不是null。希望您可以使用此功能进行验证

function validate() {

  let isChecked = document.querySelector('input[name="radNewsletter"]:checked');
  if (isChecked !== null) {
    console.log(isChecked.value);
  }
}

<input type="radio" name="radNewsletter" value="hw">Health and Wellness<br />
<input type="radio" name="radNewsletter" value="cw">Creative Writing<br />
<input type="radio" name="radNewsletter" value="g">Gardening<br/>


<button type='button' onclick='validate()'>Validate</button>

如何在没有jQuery的情况下一次验证多个单选按钮？

3 个答案: