Question

当我选中任何复选框时，它应该给出所有细节的错误消息，无论内部选中复选框。在我的代码中，如果我选择第一个复选框，则它显示一个文本框和一个下拉列表，想要进行验证以填充文本框和下拉列表值，直到它不检查其他选项，＆amp;与所有复选框相同。右键我只是将文本框和下拉列表仅用于第一个复选框，但它适用于每个复选框。简单来说，除非我不填充文本框值和下拉值，否则不允许检查下一个选项。我不知道该怎么做。谁能告诉我怎么做。

<script>
function validate()
{
    document.getElementById("error").innerHTML="atleast check one checkbox.";
    //alert("");
    var chk=document.getElementsByName("chkbox");
    var hasChecked = false;
    for(var i=0; i<chk.length; i++)
        {
            if(chk[i].checked)
            { 
                hasChecked= true;

                break;
            }
        }
return true;
}

function toggle(source) {
  checkboxes = document.getElementsByName('a[]');
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="a) selected 1"> &nbsp;&nbsp;&nbsp;a)select 1<br /><br />
Name : <input type="text" name="fname"  /><br /><br />
Country : <select><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="b) selected 2"/>&nbsp;&nbsp;&nbsp;b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="c)selected 3"/>&nbsp;&nbsp;&nbsp;c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="d)selected 4"/>&nbsp;&nbsp;&nbsp;d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" onClick="toggle(this)" value="e)Or all of the above"/>&nbsp;&nbsp;&nbsp;e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="validate()" name="submit" value="Submit" />
</form>
</body>
</html>

<?php
if(isset($_POST['submit']))
{   
    $a=@$_POST['a'];

    $supplies = @implode(',',$_POST['a']);
    echo $supplies;
}


?>

Answer 1

以下是解决方案：

<script>
function validate()
{
    var inputTags = document.getElementsByTagName('input');
    var checkboxCount = 0;
    for (var i=0, length = inputTags.length; i<length; i++) {
         if (inputTags[i].type == 'checkbox') {
            if(inputTags[i].checked){
                checkboxCount++;
            }    
         }
    }

    if(checkboxCount == 0){
        document.getElementById("error").innerHTML="atleast check one checkbox.";
        return false;
    }else{
        checkboxesahas = document.getElementsByClassName('aopt');        
        for(var i=0, n=checkboxesahas.length;i<n;i++)
        {
          if(checkboxesahas[i].checked){
              ahaselements = document.getElementsByClassName('ahaselement');
              for(var j=1;j<=ahaselements.length;j++) {
                ahaselementid = 'ahaselement'+j;
                if(document.getElementById(ahaselementid).value == ''){
                    document.getElementById("error").innerHTML="value missing in one or more of checked checkbox element.";
                    return false;                    
                }
              }
          }
        }        
    }
return true;
}

function toggle(source) {
  checkboxes = document.getElementsByClassName('aopt');
  for(var i=0, n=checkboxes.length;i<n;i++) 
  {
    checkboxes[i].checked = source.checked;
  }
}
</script>
</head>
<body>
<form method="post" name="form">
<table>
<tr><td><div id="error"></div></td></tr>
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="a) selected 1"> &nbsp;&nbsp;&nbsp;a)select 1<br /><br />
Name : <input type="text" name="fname" id="ahaselement1" class="ahaselement" /><br /><br />
Country : <select name="country" id="ahaselement2" class="ahaselement"><option value="">no</option><option value="1">india</option><option value="2">usa</option></select>
</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="b) selected 2"/>&nbsp;&nbsp;&nbsp;b)select 2</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="c)selected 3"/>&nbsp;&nbsp;&nbsp;c select 3</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="d)selected 4"/>&nbsp;&nbsp;&nbsp;d)select 4</td></tr>
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" onClick="toggle(this)" value="e)Or all of the above"/>&nbsp;&nbsp;&nbsp;e)Or all of the above </td></tr>
</table>
<input type="submit" onclick="return validate()" name="submit" value="Submit" />
</form>
</body>
</html>

<?php
if(isset($_POST['submit']))
{
    $a=@$_POST['a'];

    $supplies = @implode(',',$_POST['a']);
    echo $supplies;
}


?>

PS ：我已经通过innerHTML在error id中填写了验证方式。此外，复选框和其他元素也有一些更改。请检查一下。

如果有任何问题，请告诉我。谢谢！：）

填写复选框内的详细信息

1 个答案: