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
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');
-
But the checkbox value of false won't be submitted with a form submit, right? Is there a way to make that happen Jun 20, 2015 at 1:40
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');
}
});
-
2Old post, but you should now use
.prop('checked')
instead ofattr()
. Additionally it's easier to force it in one linevar $cb=$(this); $cb.val( $cb.prop('checked'));
or if case is importantvar $cb=$(this); $cb.val( ($cb.prop('checked')+'').toUpperCase() );
– vol7ronSep 15, 2013 at 23:05 -
1
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.
Try this:
HTML:
<input type="checkbox" value="FALSE" />
jQ:
$("input[type='checkbox']").on('change', function(){
$(this).val(this.checked ? "TRUE" : "FALSE");
})
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.
-
1Well,
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– KruleFeb 5, 2016 at 18:02
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
-
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
<input type="checkbox" name="vehicle" id="vehicleChkBox" value="FALSE"/>
--
$('#vehicleChkBox').change(function(){
if(this.checked)
$('#vehicleChkBox').val('TRUE');
else
$('#vehicleChkBox').val('False');
});
-
4Please explain your code so that future readers may benefit from it. Thank you– sica07May 11, 2018 at 13:17