[英]JavaScript checkbox validation in table
I have designed a table below using HTML. 我使用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.
在UI下面给出了验证整个表的提交。 Condition is that at least one checkbox should be selected from each row.
条件是应该从每一行中选择至少一个复选框。
Using pure js: https://jsfiddle.net/v8mghww9/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;
}
}
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: 你的代码很好,但你没有用正确的方式编写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>
Note: 注意:
The button Submit
should be of type button
and not submit
. 按钮
Submit
应该是button
类型而不是submit
。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.