Change checkbox status by click but else not working

Question

If I click into a div area and the checkbox is checked, if checked show clicked alert else unchecked is show unchecked alert. But else is not working.

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.prop("checked", !checkbox.prop("checked"))) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

Ajith Gopi · Accepted Answer · 2021-04-23 16:01:38Z

2

You can use the :checked pseudo selector to check if a checkbox is checked. Use with with jQuery's is property like checkbox.is(":checked")

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.is(":checked")) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

answered Apr 23, 2021 at 16:01

Ajith Gopi

1,9261 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Monsur Ahmed Over a year ago

when click in #hellofortest area the check box will be work like check and uncheck. And when checked by click #hellofortest area alert("Check box in Checked"); When again click it will be uncheck .and alert("Check box is Unchecked"); I am not find my answer.

Rory McCrossan · Accepted Answer · 2021-04-23 16:01:25Z

1

The problem is because you're using the setter of prop() in your if condition. This always returns a jQuery object which coerces to a truthy value, hence the else is never fired.

To fix this, remove the second argument from prop(). Now that method call will return the boolean from the checked property on the checkbox.

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  if (checkbox.prop("checked")) {
    console.log("Check box is Checked");
  } else {
    console.log("Check box is Unchecked");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hellofortest">
  <div class="reg-header">
    <div class="reg-header-title">Title</div>
  </div>
  <div class="ceo-previous-data-checkbox">
    <div class="bx-item-field">
      <input type="checkbox" id="previous_info" name="previous_info" value="previous">
    </div>
  </div>
</div>

answered Apr 23, 2021 at 16:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Monsur Ahmed Over a year ago

when click in #hellofortest area the check box will be work like check and uncheck. And when checked by click #hellofortest area alert("Check box in Checked"); When again click it will be uncheck .and alert("Check box is Unchecked"); I am not find my answer.

Monsur Ahmed · Accepted Answer · 2021-04-26 06:04:37Z

0

This Code work for me:

$("#hellofortest").on('click', function() {
  var checkbox = $(this).find('input[type=checkbox]');
  checkbox.prop("checked", !checkbox.prop("checked"))
  if (checkbox.is(":checked")) {
    alert("Check box in Checked");
  } else {
    alert("Check box is Unchecked");
  }
});

Another answer:

$(".markerDiv").click(function (e) {    
    if (!$(e.target).is('input:checkbox')) {
        var $checkbox = $(this).find('input:checkbox');
        $checkbox.prop('checked', !$checkbox.prop('checked'));
    }
});

Thanks Both of you. Rory McCrossan And Ajith Gopi.

edited Apr 26, 2021 at 6:04

answered Apr 23, 2021 at 17:50

Monsur Ahmed

232 silver badges10 bronze badges

Collectives™ on Stack Overflow

Change checkbox status by click but else not working

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related