JavaScript checkbox validation в таблице

Question

Я разработал таблицу ниже, используя HTML. Я проверял только одну строку, но для второй строки она не была проверена. Ниже пользовательского интерфейса предоставлено представление, которое проверяет всю таблицу. Условие состоит в том, что по крайней мере один флажок должен быть выбран из каждой строки.

Answer 1

Использование чистых ЯШ: 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