722

I have some input text fields in my page and am displaying their values using JavaScript.

I am using .set("value","") function to edit the value, add an extra checkbox field, and to pass a value.

Here I want to check that if value == 1, then this checkbox should be checked. Otherwise, it should remain unchecked.

I did this by using two divs, but I am not feeling comfortable with that, is there any other solution?

if(value == 1) {
    $('#uncheck').hide();
    $('#check').show();
} else{
    $('#uncheck').show();
    $('#check').hide();
}
Improve this question
0

3 Answers 3

Reset to default
1507

For jQuery 1.6+ :

.attr() is deprecated for properties; use the new .prop() function instead as:

$('#myCheckbox').prop('checked', true); // Checks it
$('#myCheckbox').prop('checked', false); // Unchecks it

For jQuery < 1.6:

To check/uncheck a checkbox, use the attribute checked and alter that. With jQuery you can do:

$('#myCheckbox').attr('checked', true); // Checks it
$('#myCheckbox').attr('checked', false); // Unchecks it

Cause you know, in HTML, it would look something like:

<input type="checkbox" id="myCheckbox" checked="checked" /> <!-- Checked -->
<input type="checkbox" id="myCheckbox" /> <!-- Unchecked -->

However, you cannot trust the .attr() method to get the value of the checkbox (if you need to). You will have to rely in the .prop() method.

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

8 Comments

An element is considered checked as long as it has the attribute of checked even if it has no value or the value is like 'false' or whatever. So $('#myCheckbox').attr('checked', false); won't uncheck, you need $('#myCheckbox').removeAttr('checked');.
@xpy .attr("checked",false); works in my browser.
@DanielCook .attr("checked",false); Works in my Firefox Developer Edition v41.0a2, but it doesn't on normal Firefox v39 and on my Chrome v43.
@DanielCook and @xpy; hence the use of prop, since it's more reliable.
$('#myCheckbox').prop('checked', false); then $('#myCheckbox').change();
|
75

You can use prop() for this, as Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.

var prop=false;
if(value == 1) {
   prop=true; 
}
$('#checkbox').prop('checked',prop);

or simply,

$('#checkbox').prop('checked',(value == 1));

Snippet

$(document).ready(function() {
  var chkbox = $('.customcheckbox');
  $(".customvalue").keyup(function() {
    chkbox.prop('checked', this.value==1);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>This is a domo to show check box is checked
if you enter value 1 else check box will be unchecked </h4>
Enter a value:
<input type="text" value="" class="customvalue">
<br>checkbox output :
<input type="checkbox" class="customcheckbox">

Improve this answer

Comments

28

You can set the state of the checkbox based on the value:

$('#your-checkbox').prop('checked', value == 1);
Improve this answer

2 Comments

This does not work for me, value is not defined.
@Dave the value is whatever the value is that you are comparing against. You can replace value == 1 with any boolean (true or false). Example: $('#your-checkbox').prop('checked', true);

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.