[英]JavaScript checkbox validation in table
我使用HTML設計了一個表格。 我只驗證了一行,但是第二行沒有驗證。 在UI下面給出了驗證整個表的提交。 條件是應該從每一行中選擇至少一個復選框。
使用純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;
}
}
你的代碼很好,但你沒有用正確的方式編寫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
。
在每行的所有復選框上給出相同的名稱,然后為要驗證的所有內容提供一個類。
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.