52

I have a form with a checkbox. With jQuery I would like to set the value of the checkbox to TRUE if checked, and if it is not checked, the value will be set to FALSE. How I can do this please?

halfer
  • 19,471
  • 17
  • 87
  • 173
Rene Zammit
  • 1,091
  • 5
  • 17
  • 42

6 Answers6

81

You can do (jQuery 1.6 onwards):

$('#idCheckbox').prop('checked', true);
$('#idCheckbox').prop('checked', false);

to remove you can also use:

$('#idCheckbox').removeProp('checked');

with jQuery < 1.6 you must do

$('#idCheckbox').attr('checked', true);
$('#idCheckbox').removeAttr('checked');
Nicola Peluchetti
  • 74,514
  • 30
  • 136
  • 188
  • But the checkbox value of false won't be submitted with a form submit, right? Is there a way to make that happen – IcedDante Jun 20 '15 at 01:40
70

UPDATED: Using prop instead of attr

 <input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE"/>

 $('#vehicleChkBox').change(function(){
     cb = $(this);
     cb.val(cb.prop('checked'));
 });

OUT OF DATE:

Here is the jsfiddle

<input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE" />

$('#vehicleChkBox').change(function(){
     if($(this).attr('checked')){
          $(this).val('TRUE');
     }else{
          $(this).val('FALSE');
     }
});
Jose Vega
  • 9,950
  • 7
  • 39
  • 57
  • 2
    Old post, but you should now use `.prop('checked')` instead of `attr()`. Additionally it's easier to force it in one line `var $cb=$(this); $cb.val( $cb.prop('checked'));` or if case is important `var $cb=$(this); $cb.val( ($cb.prop('checked')+'').toUpperCase() );` – vol7ron Sep 15 '13 at 23:05
  • 1
    And how to 'uncheck'? – Ommadawn Mar 05 '19 at 11:39
14

Use $('#id-of-the-checkbox').prop('checked', true_or_false);

In case you are using an ancient jQuery version, you'll need to use .attr('checked', 'checked') to check and .removeAttr('checked') to uncheck.

ThiefMaster
  • 298,938
  • 77
  • 579
  • 623
12

Try this:

HTML:

<input type="checkbox" value="FALSE" />

jQ:

$("input[type='checkbox']").on('change', function(){
  $(this).val(this.checked ? "TRUE" : "FALSE");
})

jsfiddle

Please bear in mind that unchecked checkbox will not be submitted in regular form, and you should use hidden filed in order to do it.

Krule
  • 6,438
  • 3
  • 33
  • 55
  • 1
    Well, `span` in snippet is for demonstration purposes only and if you take a look at the code, it will be set to be equal to value of checkbox. However, if you need a better (bit faster) solution, this might help: http://jsfiddle.net/SfEGn/130/ – Krule Feb 05 '16 at 18:02
4
var checkbox = $( "#checkbox" );
checkbox.val( checkbox[0].checked ? "true" : "false" );

This will set the value of the checkbox to "true" or "false" (value property is a string), depending whether it's unchecked or checked.

Works in jQuery >= 1.0

Esailija
  • 134,577
  • 23
  • 263
  • 318
  • This is only for the default state of the checkbox. You would need to add an event watcher on the element when the state of the checkbox changed. – Coded Container Dec 07 '20 at 15:41
0
<input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE"/>

--

$('#vehicleChkBox').change(function(){
    if(this.checked)
        $('#vehicleChkBox').val('TRUE');
   else
        $('#vehicleChkBox').val('False');
});
Gothic345
  • 1
  • 1