在选中的复选框内填写详细信息答案

【问题标题】：fill details inside checked checkbox在选中的复选框内填写详细信息
【发布时间】：2015-05-02 13:42:26
【问题描述】：

当我选中任何复选框时，它应该为选中复选框内的所有详细信息提供错误消息。在我的代码中，如果我选择第一个复选框，那么它会显示一个文本框和一个下拉列表，想要进行验证以填充文本框和下拉列表值，直到它不检查另一个选项，并且与所有复选框相同。现在我只为第一个复选框使用文本框和下拉列表，但它适用于每个复选框。简而言之，除非我不填写文本框值和下拉值，否则不允许检查下一个选项。我不知道该怎么做。谁能告诉我怎么做。

<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;
}


?>

【问题讨论】：

对不起，太混乱了，请描述确切的问题
你有这么大的复选框，你可以显示一个文本框和一个下拉列表在一个复选框内？
我更新了我的问题，请检查一下。 @Arunprasanth KV
选中复选框中的所有值是什么意思？
而不是关注复选框大小，只需阅读问题并回答它。 @Teemu

标签： javascript php html checkbox

【解决方案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 的验证信息，方式与您相同。复选框和其他元素也进行了一些更改。请也检查一下。

如果有任何问题，请告诉我。谢谢！ :)

【讨论】：

@sandysharma - 我的快乐兄弟！