jQuery - setting the value of single checkbox in a group checkbox

Question

I have four checkbox like below

<label> <input type="checkbox" id="ca" value="0" name="ca"> CA </label>
<label> <input type="checkbox" id="nv" value="0" name="nv"> NV </label>
<label> <input type="checkbox" id="tx" value="0" name="tx"> TX </label>
<label> <input type="checkbox" id="fl" value="0" name="fl"> FL </label>

When user checks/unchecks each checkbox, it should change the value of the corresponding checkbox (check = 1 and uncheck = 0)

I know that I can do it by writing code separately for each checkbox.

But, I would like to know if we can write it in a single line (or in less lines) using jQuery

This makes no sense. Why wouldn't you set the value in the markup? — charlietfl, Feb 01 '16 at 20:16
Why do you need to change the value instead of just using the box's `.checked` state? — Barmar, Feb 01 '16 at 20:39
Keep in mind that only checked boxes will be posted. See [this post](http://stackoverflow.com/questions/11424037/does-input-type-checkbox-only-post-data-if-its-checked). — showdev, Feb 01 '16 at 21:51
This is ajax post. So I am setting the values to the post parameters. — Jeff, Feb 01 '16 at 21:54

showdev · Accepted Answer · 2016-02-01T20:30:13.807

You could bind a "change" listener to each checkbox. See jQuery's .on() and .change().
Then set the "changed" checkbox's value based on whether it's checked or unchecked.

Below, I've used JavaScript's this keyword to reference the checkbox that was clicked and a ternary operator to set its value according to its "checked" status.

jQuery('input[type=checkbox]').on('change', function() {
  this.value = this.checked ? 1 : 0;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" id="ca" value="0" name="ca">CA</label>
<label><input type="checkbox" id="nv" value="0" name="nv">NV</label>
<label><input type="checkbox" id="tx" value="0" name="tx">TX</label>
<label><input type="checkbox" id="fl" value="0" name="fl">FL</label>

jQuery - setting the value of single checkbox in a group checkbox

1 Answers1