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

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

$("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;
    }
});