54

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,824
  • 17
  • 99
  • 186
Rene Zammit
  • 1,121
  • 5
  • 19
  • 42

6 Answers6

83

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
  • 76,206
  • 31
  • 145
  • 192
  • 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
  • 10,128
  • 7
  • 40
  • 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
  • 310,957
  • 84
  • 592
  • 636
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,468
  • 3
  • 34
  • 56
  • 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
  • 138,174
  • 23
  • 272
  • 326
  • 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