javascript 至少选中一个名称不同的复选框

k2arahey  于 2023-03-16  发布在  Java
关注(0)|答案(1)|浏览(130)

我有三个复选框在我的网页上。所有三个有不同的名称。我希望至少有一个复选框被选中。我看到几个帖子,验证一个复选框是必需的,但在我的情况下,所有的复选框有不同的名称。下面是我的代码:

<form asp-action="Edit">
 <div class="form-group row">
                 <div class="col">
                        <input asp-for="HREmployee" type="checkbox" class="require-one validate-checkbox-oneormore" value="1"  />    Human Resources Employee
                  

                    </div>
                    </div>
                <div class="form-group row">
                    <div class="col">
                        <input asp-for="ManagementEmployee" type="checkbox" class="require-one validate1" value="2"/>    Management

                    </div>
                </div>
                     <div class="form-group row">
                    <div class="col">
                        <input asp-for="StaffEmployee" type="checkbox" class="require-one validate1" value="3"  />    Staff Employee

                    </div>

 <input  type="submit" id="myBtn1" value="Submit" class="btn btn-primary"  />

我想让用户选中至少一个复选框。下面是我所尝试的:

jQuery(document).ready(function () {
    $.validator.addMethod('validate-validate1', function (value) {
        return $('.require-one:checked').size() != 0; }, 'need a value');

    jQuery('#Edit').validate({});
});

即使我没有选中任何复选框,表单也会被提交。
任何帮助都是感激的。

i2loujxw

i2loujxw1#

您可以使用.is(':checked')验证是否至少选中了一个匹配的元素。如果不是这种情况,请调用event.preventDefault()停止表单提交。

$('form').submit(function(e) {
  const $error = $('.error', this).text('');
  if (!$('input.require-one', this).is(':checked')) {
    e.preventDefault();
    $error.text('Please check at least one box');
  }
});
.error{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form asp-action="Edit">
  <div class="form-group row">
    <div class="col">
      <input asp-for="HREmployee" type="checkbox" class="require-one validate-checkbox-oneormore" value="1" /> Human Resources Employee
    </div>
  </div>
  <div class="form-group row">
    <div class="col">
      <input asp-for="ManagementEmployee" type="checkbox" class="require-one validate1" value="2" /> Management
    </div>
  </div>
  <div class="form-group row">
    <div class="col">
      <input asp-for="StaffEmployee" type="checkbox" class="require-one validate1" value="3" /> Staff Employee
    </div>
    <input type="submit" id="myBtn1" value="Submit" class="btn btn-primary" />
  </div>
  <p class="error"></p>
</form>

相关问题