[英]Invert checkbox on submit: Set HTML form value only if checkbox is unchecked
我需要“反转”一个复选框,即如果未选中该复选框,则提交该值,如果选中该复选框,则将其留空。
我不想阻止表单提交!
我可以想到两种方法:
解决此问题的最佳方法是什么? 我希望有一个“纯”的通用解决方案,但是由于我需要一个带有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();
});
//编辑忘了未选中的复选框不会发送。 固定,我认为
您可以通过以下方式使用onsubmit
事件:
$(".form-class").submit(function (e) {
e.preventDefault();
if (!$("#checkbox").is("checked"))
$(this).submit();
else
return false;
});
您可以在表单中动态添加/删除元素:
$('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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.