Clever Geek Handbook

How can I check the checkbox?

<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>
Run codeHide result


I added my html code as well .. 

$('.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>
Run codeHide result


I tried with this code and got a "please check the box" warning for both if and else conditions. I just want to check a checkbox if it is checked or not. If checked, it should display the corresponding message, if unchecked, it should also display the message.

+3


source to share


1 answer


There are two things I notice:

  • Use .closest()

    versus .parent()

    multiple times instead .
  • Don't set the attribute in the if clause, don't .attr()

    use it .prop()

    .

You can change this



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>
Run codeHide result


+1


source






More articles:


All Articles