Question

我在每行中都有多个复选框：

<form id="CustomerNEmployeeForm">
<table>
        <tr id="row1">
            <td>
            <div class="i-checks"><input id="checkboxCustom1" type="checkbox" name="[0].RightsCodes.OpenOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Open Orders</label></div>
            <div class="i-checks"><input id="checkboxCustom2" type="checkbox" name="[0].RightsCodes.ClosedOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Closed Orders</label></div>
            </td>
        </tr>
        <tr id="row2">
            <td>
            <div class="i-checks"><input id="checkboxCustom1" type="checkbox" name="[1].RightsCodes.OpenOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Open Orders</label></div>
            <div class="i-checks"><input id="checkboxCustom2" type="checkbox" name="[1].RightsCodes.ClosedOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Closed Orders</label></div>
            </td>
        </tr>
</table>
 <button class="btncreateusers" id="createusersJS" type="button" onclick="CreateCustomerNEmployees(this);"> Create</button>
</form>

我正在尝试验证复选框，其中用户选中了每一行中至少一个复选框。

这是我的JavaScript，但仍然没有运气：

<script>
    function CreateCustomerNEmployees(e) {

        var boxs = $(e).closest("tr").before();

        if (boxs.find('input[class=checkbox-template:checked]').val() == "") {

            alert("check at least one");
            return false;
        }
    }
</script>

任何人都可以帮助我！：）

Answer 1

由于@barbsan评论ID是唯一的。至于您的问题，您可以这样做：

为所有复选框设置变量（使用您的代码，您可以使用“复选框模板”类对其进行检测。
遍历所有对象，并放置条件以检查是否至少检查了一个。

香草js示例：

function CreateCustomerNEmployees() {
  var box = document.getElementsByClassName('checkbox-template');
  for (var i=0; i < box.length; i++) {
    if (box[i].checked) {return}
    else {alert('please check one checkbox'); return}
  }
}

<form id="CustomerNEmployeeForm">
<table>
        <tr id="row1">
            <td>
            <div class="i-checks"><input id="checkboxCustom1" type="checkbox" name="[0].RightsCodes.OpenOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Open Orders</label></div>
            <div class="i-checks"><input id="checkboxCustom2" type="checkbox" name="[0].RightsCodes.ClosedOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Closed Orders</label></div>
            </td>
        </tr>
        <tr id="row2">
            <td>
            <div class="i-checks"><input id="checkboxCustom3" type="checkbox" name="[1].RightsCodes.OpenOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Open Orders</label></div>
            <div class="i-checks"><input id="checkboxCustom4" type="checkbox" name="[1].RightsCodes.ClosedOrders" value="true" class="checkbox-template"><label for="checkboxCustom1">Closed Orders</label></div>
            </td>
        </tr>
</table>
 <button class="btncreateusers" id="createusersJS" type="button" onclick="CreateCustomerNEmployees();"> Create</button>
</form>

编辑-如果页面上有更多表单，并且您使用的是同一类，则可以只检查特定的表单，如下所示：

<script>
function CreateCustomerNEmployees() {
var theForm = document.getElementById('CustomerNEmployeeForm');
  var box = theForm.getElementsByClassName('checkbox-template');
  for (var i=0; i < box.length; i++) {
    if (box[i].checked) {return}
    else {alert('please check one checkbox'); return}
  }
}
</script>

希望有帮助。

验证多个复选框

1 个答案: