表中的JavaScript复选框验证

Question

我使用HTML设计了一个表。我只验证了一行，但第二行没有验证。 UI下面已经提交了验证整个表的提交。 条件是应该从每一行中至少选择一个复选框。

Answer 1

使用纯JS：https://jsfiddle.net/v8mghww9/1/

function validate(form) 
{ 
    var rows = document.getElementsByTagName('tr'); 
    var isTableValid = true; 
    for(var i=0;i<rows.length;i++) { 
     var checkboxs=rows[i].getElementsByTagName("input");           
     var okay=false; 
     for(var j=0;j<checkboxs.length;j++) 
     { 
      console.log('here' + checkboxs[j].checked); 
      if(checkboxs[j].checked) 
      { 
       okay=true; 
       break; 
      } 
     } 
     if(!okay && checkboxs.length > 0) { 
      isTableValid = false; 
      break; 
     } 

    } 

    if(isTableValid) 
      return true; 
     else 
     { 
      alert("Please select atleast one item for male patients"); 
      return false; 
     } 

} 

Answer 2

你的代码是很好，但你不写的jsfiddle正确的方式，这是表示你的代码工作正常，现场片段：

function validate(form) { 
 
    var checkboxs = document.getElementsByName("m1"); 
 
    var okay = false; 
 
    for (var i = 0, l = checkboxs.length; i < l; i++) { 
 
    if (checkboxs[i].checked) { 
 
     okay = true; 
 
     break; 
 
    } 
 
    } 
 
    if (okay) return true; 
 
    else { 
 
    alert("Please select atleast one item for male patients"); 
 
    return false; 
 
    } 
 
}

table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    padding: 0.5em; 
 
    line-height: 1.5em; 
 
} 
 
#color { 
 
    background-color: lightblue; 
 
} 
 
.adjust { 
 
    text-align: left; 
 
} 
 
input[type="checkbox"] { 
 
    margin-left: 47%; 
 
}

<table border="1" width="100%"> 
 
    <tr> 
 
    <th rowspan="3">OAB Patient Types</th> 
 
    <th colspan="6" id="color">Therapy of First Choice</th> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="4" id="color">Muscarinic Antagonists</th> 
 
    <th style="background-color:lightblue">Beta-3 Adrenergic Agonist</th> 
 
    <th style="background-color:lightblue">Other Therapies</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Detrol LA 
 
     <br>(tolterodine)</th> 
 
    <th>Enablex 
 
     <br>(darifencian)</th> 
 
    <th>Toviaz 
 
     <br>(festoridine)</th> 
 
    <th>VESIcare 
 
     <br>(solifencian)</th> 
 
    <th>Myrbetriq 
 
     <br>(merabergan)</th> 
 
    <th>Other</th> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="7" id="color" class="adjust">General Patient Types</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Male Patients</td>// 
 
    <form name=form1> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=m1> 
 
     </td>//</form> 
 
    </tr> 
 
    <tr> 
 
    <td>Female Patients</td> 
 
    <form name=form2> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox" name=f1> 
 
     </td> 
 
     <!-- <td><input type="submit" value="submit"></td> --> 
 
    </form> 
 
    </tr> 
 
    <tr> 
 
    <th colspan="7" id="color" class="adjust">Line of Therapy</th> 
 
    </tr> 
 
    <tr> 
 
    <td>First-line (newly daignosed OAB patients on their first course of therapy)</td> 
 
    <form> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </form> 
 
    </tr> 
 
    <tr> 
 
    <td>Second-line</td> 
 
    <form> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </form> 
 
    </tr> 
 
    <tr> 
 
    <td>Third-line</td> 
 
    <form> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
     <td> 
 
     <input type="checkbox"> 
 
     </td> 
 
    </form> 
 
    </tr> 
 
</table> 
 
<br> 
 
<br> 
 
<center> 
 
    <input type="button" value="Submit" onclick='return validate()'> 
 
</center>

注：

按钮Submit应button类型，而不是submit的。

• 第一件事情，因为这不是任何形式提交
• 第二件事里面，你必须在你的页面多种形式（这是这里怪），所以你可能在提交冲突，它们的形式wityh这个提交按钮？

Answer 3

在每行的所有复选框上给出相同的名称，然后为所有要验证的项目提供一个类。

function validate() { 

    var flag = true; 
    var array = []; 
    $(".js-validate-required-radio").each(function() { 
     array.push($(this).prop('name')); 
    }); 
    var uniqueNames = $.unique(array); 
    for (var i = 0; i < uniqueNames.length; i++) { 
     if ($('input:checkbox[name=' + uniqueNames[i] + ']:checked').val() == undefined) { 
      if (flag) { 
       flag = false; 
      } 
     } 
    } 
    if(!flag){ 
    alert('select atleast one radio on each row');  
    } 
    else{ 
      alert('yeee');  
    } 
    return flag; 
} 

here is fiddle