提交时反转复选框：仅当复选框未选中时才设置 HTML 表单值

Question

我需要"invert"一个复选框，即如果复选框未选中则提交值，如果复选框已选中则将其留空。

我不想阻止表单提交！

我可以想到两种方法：

更改复选框的外观，使其看起来是否已选中，反之亦然
单击复选框时通过 JavaScript 更改隐藏输入

解决这个问题的最佳方法是什么？我更喜欢 "pure" 通用解决方案，但由于我需要它用于 twitter-bootstrap-3, jquery and 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>

但是您会在下一页加载之前看到复选框状态发生变化。

Answer 1

您可以这样使用 onsubmit 事件：

$(".form-class").submit(function (e) {
  e.preventDefault();
  if (!$("#checkbox").is("checked"))
    $(this).submit();
  else
    return false;
});

Answer 2

好的，据我所知，您想要反转复选框。

如果选中，则不要使用表单发送值。

如果未选中，则将值与表单一起发送。

如果您想在复选框单击时提交表单，我只是没明白。

创建一个具有值的同名隐藏输入。选中复选框后禁用隐藏框。

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

});

//编辑忘记未选中的复选框不会发送。我认为已修复

Answer 3

您可以将 add/remove 元素动态地添加到表单中：

$('the_form').observe('submit', function(event){
  $$('#the_form input[type=checkbox]').each(function(input){
    if (! input.checked) $('the_form').insert({top: new Element('input', {
         type: 'hidden'
       , class: 'dynamicInsert'
       , name: input.name
       , value: 'off'
       })
     });
  });
  this.submit();
  $$('#the_form input.dynamicInsert').each(function(input){
    input.remove();
  });
  event.stop(); // don't know if .submit() accepts an event object as parameter
  return false;
});

提交时反转复选框：仅当复选框未选中时才设置 HTML 表单值

Invert checkbox on submit: Set HTML form value only if checkbox is unchecked

javascript

jquery

html

twitter-bootstrap-3

prototypejs

这按预期工作：