我需要“反转”复选框，即如果复选框未选中则提交值，如果复选框已选中则将其留空。
我不想阻止表单提交!
我可以想到两种方法:
- 更改复选框的外观，使其看起来是否已选中，反之亦然
- 单击复选框时通过 JavaScript 更改隐藏的输入
处理此问题的最佳方法是什么？我更喜欢“纯粹”的通用解决方案，但因为我需要它来处理 twitter-bootstrap-3 的项目, jquery和 prototypejs ，我相应地标记了问题，如果有使用这些框架的简单方法，那也很好。
这按预期工作:
<form id="the_form" method="post" action="">
<input type="checkbox" id="the_checkbox" name="the_checkbox" value="foo" />
</form>
<script>
document.forms.the_form.observe('submit', function() {
document.getElementById('the_checkbox').checked = ! document.getElementById('the_checkbox').checked;
});
</script>
但是您会看到复选框状态在下一页加载之前发生变化。
最佳答案
好的，据我了解，您想要反转复选框。
如果选中，则不要使用表单发送值。
如果未选中，则将值与表单一起发送。
如果您想在复选框单击时提交表单，我只是没有得到。
创建一个具有相同名称且具有该值的隐藏输入。 选中复选框后禁用隐藏框。
<input type='hidden' id='hiddenCheckboxValue' value='something' name='testbox'>
<input type='checkbox' value='' name='testbox'>
$('#my_checkbox').click(function(){
if($(this).is(':checked')){
document.getElementById('hiddenCheckboxValue').disabled = true;
} else {
document.getElementById('hiddenCheckboxValue').disabled = false;
}
//If you want to submit on checkbox click
$( "#form" ).submit();
});
//EDIT 忘记了未选中的复选框不会被发送。我认为固定
关于javascript - 提交时反转复选框 : Set HTML form value only if checkbox is unchecked，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32250747/