jQuery - Checkbox Checked

Question

Does prop("checked", false) reset the <option> value on checkbox? For example:

<input type="checkbox" name="price_range" value="1" id="ceo"> < $10,000
<input type="checkbox" name="price_range" value="2" id="bod"> < $ 200,000.00

Let say if I have two checkbox, when I click on id=ceo, then, I click on id=bod it will overwrite the value of the checkbox. Can I use coding as below to get the value:

if ($('#ceo').is(":checked"))
{
    //if ceo is check           
} 
else if ($('#bod').is(":checked")) 
{
    //if bod is check
} 
else 
{
   //set prop("checked", false)
}

"Does prop("checked", false) reset the <option> value on checkbox?" Checkboxes have no <option> value. What are you really asking? prop("checked", false) makes the checkbox not checked. That's it. — T.J. Crowder
– T.J. Crowder, Commented Sep 19, 2016 at 9:39
It sounds as though your checkboxes should be radio buttons. — T.J. Crowder
– T.J. Crowder, Commented Sep 19, 2016 at 9:40
"Does prop("checked", false) reset the <option> value on checkbox" - No. It changes the "checked" property on the checkbox, nothing else. — fdomn-m
– fdomn-m, Commented Sep 19, 2016 at 9:43
This may help you ex. stackoverflow.com/questions/5839884/… — Butani Vijay
– Butani Vijay, Commented Sep 19, 2016 at 9:45

Sudharsan S · Accepted Answer · 2016-09-19 09:46:45Z

2

Just use attribute selctor in jquery

$("input[name='price_range']").click(function() {
  $("input[name='price_range']").removeProp('checked');
  $(this).prop('checked', true);
  console.log(this.value);
});

edited Sep 19, 2016 at 9:46

answered Sep 19, 2016 at 9:41

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

1 Comment

Amran Over a year ago

I have tried yours and it work great. Thank you @SudharsanS. Can you briefly explain what does the .removeProp('checked') for. I'm unclear with that.

T.J. Crowder · Accepted Answer · 2016-09-19 09:46:11Z

.prop("checked", false) makes the checkbox not checked. That's it. It has no effect o the checkbox's value (if that's what you meant by "<option> value").

It sounds as though your checkboxes should be radio buttons, since users don't expect checkboxes to behave like radio buttons, and surprises make for poor UX.

But if it's important that they be checkboxes, but also be mututally-exclusive, you can implement that by searching for others with the same name and unchecking them:

$("input[name=price_range]").on("click", function() {
  if (this.checked) {
    $("input[name=" + this.name + "]").not(this).prop("checked", false);
  }
});

Example:

$("input[name=price_range]").on("click", function() {
  if (this.checked) {
    $("input[name=" + this.name + "]").not(this).prop("checked", false);
  }
});

<label>
  <input type="checkbox" name="price_range" value="1" id="ceo">&lt; $10,000</label>
<label>
  <input type="checkbox" name="price_range" value="2" id="bod">&gt; $ 200,000.00</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

(See also the use of label in the snippet.)

Hu Qiang · Accepted Answer · 2016-09-19 09:43:20Z

0

I suppose you want to have at most one checkbox checked at anytime, right? If that is the case, you may checkout out radio input.

answered Sep 19, 2016 at 9:43

Hu Qiang

1,8821 gold badge12 silver badges7 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2016-09-19 09:46:04Z

0

You should use radio button instead of checkbox here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="price_range" value="1" id="ceo"> 
<input type="radio" name="price_range" value="2" id="bod">

Checkbox should be used when you want to select multiple values. If however you wish to implement it using checkbox then

$('input:checkbox').click(function() {
    $('input:checkbox').not(this).prop('checked', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="price_range" value="1" id="ceo"> 
<input type="checkbox" name="price_range" value="2" id="bod">

answered Sep 19, 2016 at 9:46

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Comments

Nitya Kumar · Accepted Answer · 2016-09-19 09:47:07Z

0

$("input[name=price_range]").on("click", function() {
    if (this.checked && this.id === 'ceo') {
        // do code for ceo
    }
    else if (this.checked && this.id === 'bod') {
            //do code for bod;
    }
    else{
       //do code;
    }
});

answered Sep 19, 2016 at 9:47

Nitya Kumar

9688 silver badges14 bronze badges

2 Comments

Sudharsan S Over a year ago

Nitya. Suppose I have 100 checkboxes then how about your code?

abarisone Over a year ago

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this".

Collectives™ on Stack Overflow

jQuery - Checkbox Checked

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related