如何使复选框包含值：checked（布尔值）？答案

【问题标题】：How do I make the checkbox contain value :checked (boolean)?如何使复选框包含值：checked（布尔值）？
【发布时间】：2021-09-24 21:04:24
【问题描述】：

我想根据 :checked 使复选框输入具有动态值。

如果选中复选框，则值为“true”

<input type="checkbox" value="true" checked="checked">

或如果复选框未选中，则值为“false”

<input type="checkbox" value="false">

我这样做是因为我通过 ajax 提交表单并且我正在使用 jQuery.searialize()

这个字段更像是一个开关。

有可能吗？谢谢！

【问题讨论】：

为什么需要这样做？您要提交表单吗？
是的，通过 ajax。
jQuery.serialize() 应该只在它被检查时才给你这个值
复选框用于表单。发送表单时，只有那些被选中的才会返回它们包含的值。如果它们没有被检查，它们的值就不会被传输。

标签： javascript html jquery

【解决方案1】：

您可以为更改事件添加事件侦听器。

let checkbox = document.querySelector('input[type=checkbox]');
function setValue(checkbox){
  checkbox.value = checkbox.checked;
}
setValue(checkbox);
console.log(checkbox);
checkbox.addEventListener('change', ()=>{
  setValue(checkbox);
  console.log(checkbox);
});

&lt;input type="checkbox"&gt;

【讨论】：

【解决方案2】：

jQuery 方式

$('[data-switchval]').change(function() {
  $(this).val($(this).prop('checked'));
  console.log('current value of checkbox:', $(this).val())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" data-switchval value="true" checked="checked">

[后记] 刚刚意识到这个问题被标记为 jQuery...这里是 vanillaJS 版本。

document.querySelector('[data-switchval]').addEventListener('change', e => {
  e.target.value = e.target.checked
  console.log('current value of checkbox:', e.target.value)
})

&lt;input type="checkbox" data-switchval value="true" checked="checked"&gt;

【讨论】：

谢谢@Kinglish，我正在提交一个带有ajax的表单并且我正在使用jQuery.serialize()所以我不知道是否选中了一个复选框。
知道了！我刚刚更新以在 jquery 中显示相同的简洁代码

【解决方案3】：

如果我理解了这个问题，您想根据是否选中复选框来更改复选框的值吗？这可以通过 AJAX 完成。您必须为复选框输入添加一个 id ('#checkbox1')。

这是一种解决方案：

$('#checkbox-value').text($('#checkbox1').val());

$("#checkbox1").on('change', function() {
  if ($(this).is(':checked')) {
  $(this).attr('value', 'true');
  } else {
  $(this).attr('value', 'false');
  }

 $('#checkbox-value').text($('#checkbox1').val());
});

然后将其添加到您的代码中以获取值：

<div id="checkbox-value"></div>

【讨论】：