JavaScript checkbox validation in table

Question

I have designed a table below using HTML. I have validated for only one row, but for the 2nd row it was not validated. Below UI have given submit that validates entire table. Condition is that at least one checkbox should be selected from each row.

Answer 1

Using pure 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

Your code was fine but you weren't writing the jsfiddle the right way, this is a live snippet showing that your code works fine:

 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> 

Note:

The button Submit should be of type button and not submit .

• First thing because it's not inside any form to be submitted
• Second thing is that you have many forms in your page (which is strange here), so you may have a conflict in submitting which form of them wityh this submit button?

Answer 3

give the same name on all the checkboxes of each row and then give it a class to all which you want to validate.

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