表中的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