使用 jQuery 将复选框的值设置为 true 或 false答案

【问题标题】：Setting the value of checkbox to true or false with jQuery使用 jQuery 将复选框的值设置为 true 或 false
【发布时间】：2012-01-09 19:29:36
【问题描述】：

我有一个带有复选框的表单。使用 jQuery，如果选中，我想将复选框的值设置为 TRUE，如果未选中，则该值将设置为 FALSE。请问我该怎么做？

【问题讨论】：

标签： jquery

【解决方案1】：

你可以这样做（jQuery 1.6 以上）：

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

删除你也可以使用：

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

使用 jQuery

$('#idCheckbox').attr('checked', true);
$('#idCheckbox').removeAttr('checked');

【讨论】：

但是复选框值 false 不会随表单提交一起提交，对吧？有没有办法做到这一点

【解决方案2】：

更新：使用 prop 代替 attr

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

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

过时：

这里是jsfiddle

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

$('#vehicleChkBox').change(function(){
     if($(this).attr('checked')){
          $(this).val('TRUE');
     }else{
          $(this).val('FALSE');
     }
});

【讨论】：

旧帖子，但您现在应该使用.prop('checked') 而不是attr()。此外，在一行中强制使用它更容易var $cb=$(this); $cb.val( $cb.prop('checked')); 或者如果大小写很重要var $cb=$(this); $cb.val( ($cb.prop('checked')+'').toUpperCase() );
以及如何“取消选中”？

【解决方案3】：

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

如果您使用的是古老的 jQuery 版本，则需要使用 .attr('checked', 'checked') 来勾选，.removeAttr('checked') 来取消勾选。

【讨论】：

【解决方案4】：

试试这个：

HTML：

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

jQ：

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

jsfiddle

请记住，未选中的复选框不会以常规形式提交，您应该使用隐藏字段来提交。

【讨论】：

嗯，sn-p 中的span 仅用于演示目的，如果您查看代码，它将被设置为等于复选框的值。但是，如果您需要更好（更快）的解决方案，这可能会有所帮助：jsfiddle.net/SfEGn/130

【解决方案5】：

var checkbox = $( "#checkbox" );
checkbox.val( checkbox[0].checked ? "true" : "false" );

这会将复选框的value 设置为"true" 或"false"（value property 是string)，取决于它是unchecked 还是checked。

适用于 jQuery >= 1.0

【讨论】：

这仅适用于复选框的默认状态。当复选框的状态发生变化时，您需要在元素上添加事件观察器。

【解决方案6】：

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

--

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

【讨论】：

请解释您的代码，以便未来的读者可以从中受益。谢谢