javascript - 反转提交时的复选框:仅在未选中复选框的情况下设置HTML表单值

我需要“反转”复选框，即如果复选框未选中，则提交值，如果复选框选中，则保留为空。
我不想阻止表单提交！
我可以想到两种方法：
更改复选框的外观，以便它看起来是选中的，如果它实际上不是，反之亦然
单击复选框时通过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>

但在加载下一页之前，您将看到复选框状态正在更改。

最佳答案

好吧，我知道你想把复选框反过来。
如果勾选了，不要用表单发送值。
如果未选中，则将值与表单一起发送。
我只是没有得到如果你想提交的复选框点击表格。
使用与该值同名的隐藏输入。
选中该复选框后，禁用hiddenbox。

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

});

//编辑忘记了未选中的复选框不会被发送。我想是固定的

关于javascript - 反转提交时的复选框:仅在未选中复选框的情况下设置HTML表单值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32250747/