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)
}

Use this: http://stackoverflow.com/questions/2279760/how-to-reset-all-checkboxes-using-jquery-or-javascript — carborgar, Sep 19 '16 at 09:39
It sounds as though your checkboxes should be radio buttons. — T.J. Crowder, Sep 19 '16 at 09:40
This may help you ex. http://stackoverflow.com/questions/5839884/make-checkbox-behave-like-radio-buttons-with-javascript — Butani Vijay, Sep 19 '16 at 09:45
Thank you for the input guys. Will try the answers and give the update — Amran, Sep 20 '16 at 00:48

Sudharsan S · Accepted Answer · 2016-09-19T09:46:45.853

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 '16 at 09:46

answered Sep 19 '16 at 09:41

Sudharsan S

15,336
3
31
49

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. – Amran Sep 20 '16 at 00:56

T.J. Crowder · Answer 2 · 2016-09-19T09:46:11.810

.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.)

score 0 · Answer 3 · answered Sep 19 '16 at 09:43

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 '16 at 09:43

Hu Qiang

1,862
1
12
7

score 0 · Answer 4 · answered Sep 19 '16 at 09:46

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">

score 0 · Answer 5 · answered Sep 19 '16 at 09:47

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 '16 at 09:47

Nitya Kumar

967
8
14

Nitya. Suppose I have 100 checkboxes then how about your code? – Sudharsan S Sep 19 '16 at 09:48
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". – abarisone Sep 19 '16 at 13:56

jQuery - Checkbox Checked

5 Answers5