Checkbox value cannot be changed based on check or unchecked using jquery [duplicate]

Question

Checkbox value is change to 1 but when unchecked then it cannot be change to 0

$('.ChkBox').change(function() {
  if ($(this).attr('checked')) {
    $(this).val('1');
  } else {
    $(this).val('0');
  }
  alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

In the alert I always get 1.

By default value is 0 and checked. I want it so that when the box is unchecked I get 1, and when checked I get 0. Please tell me where I am doing wrong.

Use if ($(this).is(':checked'))

j08691
– j08691

2018-04-16 13:36:48 +00:00
Commented Apr 16, 2018 at 13:36 — j08691
– j08691, Commented Apr 16, 2018 at 13:36
thanks for the help @j08691

Arslan
– Arslan

2018-04-16 13:38:27 +00:00
Commented Apr 16, 2018 at 13:38 — Arslan
– Arslan, Commented Apr 16, 2018 at 13:38

Shiladitya · Accepted Answer · 2018-04-16 13:38:18Z

1

Here you go with a solution

$('.ChkBox').change(function() {
  if ($(this).prop('checked')) {
    $(this).val('1');
  } else {
    $(this).val('0');
  }
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

Instead of .attr please use .prop (property)

answered Apr 16, 2018 at 13:38

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

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

2 Comments

Cata John Over a year ago

Explaining why he should use prop instead of attr would be great.

Arslan Over a year ago

thanks for the help. now its working

alessandrio · Accepted Answer · 2018-04-16 13:40:23Z

0

Instead of .attr you could put is(':checked') and ternary condition

$('.ChkBox').change(function() {
  $(this).val( $(this).is(':checked') ? '1' : '0' );
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" />

answered Apr 16, 2018 at 13:40

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

Comments

Harish ST · Accepted Answer · 2018-04-16 13:44:32Z

0

Try this:

I have just used an onclick event inside the HTML and for debugging, I have used Jquery. You can remove the Jquery, if you don't need.

$(".ChkBox").on("change", function() {
var a = $(this).val();
alert(a);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked data-plugin="switchery" data-color="#648c2c" data-size="small" value="0" class="ChkBox" name="sms[]" onclick="$(this).attr('value', this.checked ? 1 : 0)"/>

hope this helps.

answered Apr 16, 2018 at 13:44

Harish ST

1,51110 silver badges23 bronze badges

Collectives™ on Stack Overflow

Checkbox value cannot be changed based on check or unchecked using jquery [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related