javascript - 我如何验证复选框？

Question

<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
  <div class="form-group row" style="margin-top:10px;height:50px;">
    <div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
      <label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
											<span>Hepatitis A vaccine</span></label>
    </div>
    <div class="form-group col-md-4">
      <!-- Date input -->
      <input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
    </div>

  </div>
  <div class="row" style="padding:15px;">
    <div class="col-md-3 col-md-offset-1">
      <div class="form-group">
        <h3 style="color:orange;">Clinic Name</h3><br>
        <input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
        <label for="clinic_name"></label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <h3 style="color:orange;">Name of the Health practitioner</h3><br>
        <input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
        <label for="hp_name"></label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <h3 style="color:orange;">Lot no. of Vaccine</h3><br>
        <input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
        <label for="lotno"></label>
      </div>
    </div>
    <div class="row col-md-offset-1">
      <div class="col-md-6 text-right">
        <input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
      </div>
    </div>
  </div>
</form>

我也添加了我的html代码..

$('.save').on('click', function() {
  var chk = $(this).parent().parent().parent().parent().parent().find('input    [name="ch"]').attr('class');
if ($("." + chk).attr('checked', false)) {
    alert("please check the checkbox");
  } else {
    alert("you have checked the checkbox");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

我已经尝试使用此代码并在 if 和 else 两种情况下都收到警告“请选中复选框”。 我只想验证复选框是否被选中.. 如果选中意味着它应该显示相关消息如果没有选中也应该显示消息。

Answer 1

我注意到两件事:

1. 而是对 .parent() 多次使​​用 .closest()。
2. 不要在 if 条件中设置属性，使用 .prop() 代替 .attr()。

---

你可以改成这个

var chk = $(this).closest('form').find('input[name="ch"]');// use form if you have one.
if (!$(chk).prop('checked')) {

$('.save').on('click', function() {
  var chk = $(this).closest('form').find('input[name="ch"]');
  if (!$(chk).prop('checked')) {
    alert("please check the checkbox");
  } else {
    alert("you have checked the checkbox");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form target="_self" id="immunization_info_form" class="form-validation save_immune25 update_immune25" role="form" method="POST" enctype="multipart/form-data">
  <div class="form-group row" style="margin-top:10px;height:50px;">
    <div class="checkbox checkbox-styled col-md-offset-1 col-md-4">
      <label style="font-size:15px;"><input type="checkbox" id="checkbox25" name="ch" class="checkbx" value="25">
											<span>Hepatitis A vaccine</span></label>
    </div>
    <div class="form-group col-md-4">
      <!-- Date input -->
      <input class="form-control edit25" id="date25" name="date" placeholder="Enter Date" value="<?php echo $date[25]; ?>" type="text" required>
    </div>

  </div>
  <div class="row" style="padding:15px;">
    <div class="col-md-3 col-md-offset-1">
      <div class="form-group">
        <h3 style="color:orange;">Clinic Name</h3><br>
        <input name="clinic_name" id="clinic" class="form-control edit25" type="text" value="<?php echo $clinic_name[25]; ?>" required>
        <label for="clinic_name"></label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="form-group">
        <h3 style="color:orange;">Name of the Health practitioner</h3><br>
        <input name="hp_name" id="hp" class="form-control edit25" type="text" value="<?php echo $practitioner[25]; ?>" required>
        <label for="hp_name"></label>
      </div>
    </div>
    <div class="col-md-3">
      <div class="form-group">
        <h3 style="color:orange;">Lot no. of Vaccine</h3><br>
        <input name="lotno" id="lot" class="form-control edit25" type="text" value="<?php echo $lotno[25]; ?>" required>
        <label for="lotno"></label>
      </div>
    </div>
    <div class="row col-md-offset-1">
      <div class="col-md-6 text-right">
        <input type="button" name="submit" value="SAVE" class="save btn btn-lg btn-primary ink-reaction justify" id="save_immune25">
      </div>
    </div>
  </div>
</form>