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

here is fiddle