53

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?

6 Answers 6

82

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');
1
  • 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, 2015 at 1: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');
     }
});
2
  • 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, 2013 at 23:05
  • 1
    And how to 'uncheck'?
    – Ommadawn
    Mar 5, 2019 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.

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.

1
  • 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: jsfiddle.net/SfEGn/130
    – Krule
    Feb 5, 2016 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

1
  • 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. Dec 7, 2020 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');
});
1
  • 4
    Please explain your code so that future readers may benefit from it. Thank you
    – sica07
    May 11, 2018 at 13:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.