Question

我有一个动态生成单选按钮组的情况表单。

要求：

每组按钮的数量可以是一个或多个。
有一个功能可以检查是否已经选择了单选按钮如果没有做出选择，则发出错误警告。

当只有一个单选按钮时，即使选择了按钮，检查也会失败并发出错误警告。当我记录（或在本例中是警告）表单元素时，我会为单个组或多个组获取不同的对象类型：RadioNodeList vs checkkRb()。由于检查函数HTMLInputElement遍历列表而RadioNodeList返回未定义的长度，因此在单个按钮组中不会捕获选择。

为什么对象类型不同？为什么单个单选按钮的长度为<form action="">  <label for="single">Single</label> <input type="Radio" id="single" name="offering" value="single" checked>  <p>Multiple</p> <label><input type="Radio" id="yes" name="choices" value="Yes"> Yes </label> <label><input type="Radio" id="no" name="choices" value="No"> No </label> <div> </div> <input type="Submit" id="Submit" name="Submit" value="Continue" onclick="return checkForm(this.form)"> </form>？

当按钮数量未知时，如何检查各种单选按钮组？

这是一个精简的例子：

HTML

function checkRb(rb){
  var error = '';
  var flag = 0;
  var itschecked = 0

  alert(rb);

  for (var i = 0; i < rb.length; i++){
    if (rb[i].checked){
      itschecked = 1;
    } 
  }

  if (itschecked == 0){
    error = error + "Error message \r\r";
    flag = 1;
  }

  return {flag: flag, error: error};
}

function checkForm(form){
  var error = '';
  var flag = 0;

  var ckSingle = checkRb(form.offering);
  if (ckSingle.flag == 1){
    flag = 1;
  }
  error += ckSingle.error;

  var ckMultiple = checkRb(form.choices);
  if (ckMultiple.flag == 1){
    flag = 1;
  }
  error += ckMultiple.error;

  // alert error if selection is not made
  if (flag == 1){
    alert(error);
    return false;
  }
  return true;
}

JS

var parameters = { "parameters" :
    [
        {
            "key": "feedbackSource",
            "value": "foo"
        }, {
            "key": "status",
            "value": "foo"
        }, {
            "key": "feedbackType",
            "value": "foo"
        }
    ]
};

Answer 1

将脚本更新为此选项吗？

通过检查对象长度在使用之前是否可计数，可以避免像对象这样的非数组上的错误。

  if (rb.length > 0) {
    for (var i = 0; i < rb.length; i++) {
      if (rb[i].checked) {
        itschecked = 1;
      }
    }
  } else {
    if (rb.checked) {
      itschecked = 1;
    }
  }

示例代码段

＆＃13;

function checkRb(rb) {
  var error = '';
  var flag = 0;
  var itschecked = 0

  if (rb.length > 0) {
    for (var i = 0; i < rb.length; i++) {
      if (rb[i].checked) {
        itschecked = 1;
      }
    }
  } else {
    if (rb.checked) {
      itschecked = 1;
    }
  }
  
  if (itschecked == 0) {
    error = error + "Error message \r\r";
    flag = 1;
  }

  return {
    flag: flag,
    error: error
  };
}

function checkForm(form) {
  var error = '';
  var flag = 0;

  var ckSingle = checkRb(form.offering);
  if (ckSingle.flag == 1) {
    flag = 1;
  }
  error += ckSingle.error;

  var ckMultiple = checkRb(form.choices);
  if (ckMultiple.flag == 1) {
    flag = 1;
  }
  error += ckMultiple.error;

  // alert error if selection is not made
  if (flag == 1) {
    alert(error);
    return false;
  }
  return true;
}

＆＃13;

<form action="">

  <!-- Single radio button -->
  <label for="single">Single</label>
  <input type="Radio" id="single" name="offering" value="single" checked>

  <!-- Multiple radio buttons -->
  <p>Multiple</p>
  <label>
    <input type="Radio" id="yes" name="choices" value="Yes">Yes</label>
  <label>
    <input type="Radio" id="no" name="choices" value="No">No</label>

  <div>&nbsp;</div>
  <input type="Submit" id="Submit" name="Submit" value="Continue" onclick="return checkForm(this.form)">

</form>

＆＃13;

Answer 2

<html>
<head>
<script type="text/javascript">
    function DisplayFormValues()
    {
        var chkdval='';
        var str = '';
        var elemName='';

        var elem = document.getElementById('frmMain').elements;
        for(var i = 0; i < elem.length; i++)
        {   
            if(elem[i].checked){
                str += "<BR><b>Name:</b>" + elem[i].name + ": " +  elem[i].value + " is checked.";              
            }
        document.getElementById('lblValues').innerHTML = str;   

    }

</script>
</head>
<body>
    <form id="frmMain" name="frmMain">
        <fieldset class="radiogroup"> 
        <legend>single</legend> 
        <ul class="radio"> 
            <!-- Single radio button -->        
            <li><input type="Radio" id="single" name="s1" value="single" checked><label for="single">Single</label></li>        
        </ul> 
        </fieldset> 

        <p>Multiple</p>
        <fieldset class="radiogroup"> 
        <legend>Multiple Radio</legend> 
        <ul class="radio"> 
            <li><input type="Radio" id="yes" name="m1" value="Yes"><label for="yes"> Yes </label></li>
            <li><input type="Radio" id="no" name="m2" value="No" checked><label for="no"> No </label></li>
        </ul> 
        </fieldset>     

        <!-- Triple radio buttons -->
        <p>Triple</p>
        <fieldset class="radiogroup"> 
        <legend>Triple Radio</legend> 
        <ul class="radio"> 
            <li><input type="Radio" id="yes" name="t1" value="Yes"><label for="yes"> Yes </label></li>
            <li><input type="Radio" id="no" name="t2" value="No"><label for="no"> No </label></li>
            <li><input type="Radio" id="maybe" name="t3" value="maybe" checked><label for="maybe"> Maybe </label></li>
        </ul> 
        </fieldset> 

        <!-- Quadruplet radio buttons -->
        <p>Quadruplet</p>
        <fieldset class="radiogroup"> 
        <legend>Quadruplet Radio</legend> 
        <ul class="radio"> 
            <li><input type="Radio" id="yes" name="q1" value="Yes"><label for="yes"> Yes </label></li>
            <li><input type="Radio" id="no" name="q2" value="No"><label for="no"> No </label></li>
            <li><input type="Radio" id="maybe" name="q3" value="maybe"><label for="maybe"> Maybe </label></li>
            <li><input type="Radio" id="maybe" name="q4" value="alright" checked><label for="alright"> AllRight </label></li>
        </ul> 
        </fieldset>         

        <input type="button" value="Test" onclick="DisplayFormValues();" /> 
    </form>
    <hr />
    <div id="lblValues"></div>
</body>
</html>

如何使用一个或多个动态检查单选按钮

2 个答案: