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

• 首先，因为它不在任何形式提交
• 第二件事是你的页面中有很多表格（这里很奇怪），所以你提交哪种形式的提交按钮可能会有冲突？

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

这里是小提琴