我如何验证复选框？

Question

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我已经添加了我的HTML代码..

＆＃13;

＆＃13;

$('.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");
  }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我已尝试使用此代码并收到警报＆＃34;请选中复选框＆＃34;对于这两种情况，如果和其他。 我只想验证复选框是否已选中..如果选中则表示如果未选中则应显示相关信息也应显示该信息。

Answer 1

我注意到有两件事：

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

您可以更改为此

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>