如何使复选框包含值:checked(布尔值)

Question

我想让复选框输入具有动态值，取决于：checked。

如果复选框被选中，则该值为"0"；真"；

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

或如果复选框未选中，则该值为"0"；false"；

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

我这样做是因为我通过ajax提交表单，并且我使用jQuery.serralize((

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

有可能吗？谢谢

Answer 1

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)
})

<input type="checkbox" data-switchval value="true" checked="checked">

Answer 2

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

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);
});

<input type="checkbox">

Answer 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>