check / uncheck checkbox using jquery?

Question

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

score 1470 · Accepted Answer · edited Jan 19 '18 at 09:14

1470

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.

edited Jan 19 '18 at 09:14

answered Jul 02 '13 at 08:12

Eric

18,532
2
34
39

75

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 Jun 11 '15 at 12:45
5

@xpy `.attr("checked",false);` works in my browser. – Daniel Jul 16 '15 at 13:25
1

@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. – xpy Jul 16 '15 at 13:49
15

@DanielCook and @xpy; hence the use of `prop`, since it's more reliable. – Eric Jul 16 '15 at 16:42
1

$('#myCheckbox').prop('checked', false); then $('#myCheckbox').change(); – Nick B Oct 19 '16 at 21:14
Don't forget to `$("#myCheckbox").prop("indeterminate", false);` while you're at it – OutstandingBill Nov 17 '16 at 00:44
@Daniel is right "According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes." – InsaurraldeAP Feb 11 '17 at 21:21
@Eric `attr()` is NOT deprecated. Attributes and properties are easy to get confused about, but the relevant jQuery guide [provides a good explanation](http://api.jquery.com/prop/#entry-longdesc), just like [this answer on SO specifically about HTML](https://stackoverflow.com/a/6004028/2037924) but very much relevant here. – benomatis Mar 06 '19 at 14:08

Rohan Kumar · Answer 2 · 2017-01-31T04:35:46.143

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

score 28 · Answer 3 · answered Jul 02 '13 at 08:13

28

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

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

answered Jul 02 '13 at 08:13

billyonecan

20,090
8
42
64

4

This does not work for me, value is not defined. – Dave Oct 07 '17 at 21:12
@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); – Ben May 06 '20 at 19:27

check / uncheck checkbox using jquery?

3 Answers3

Linked

Related