如何使用 Javascript 根据复选框的状态更改隐藏输入的值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6267758/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use Javascript to change value of a hidden input depending on status of a checkbox?
提问by Dave
I am trying to change the value of a hidden input field, depending on the value of a checkbox. I don't know much about Javascript but this is what I have so far.
我正在尝试根据复选框的值更改隐藏输入字段的值。我对 Javascript 了解不多，但这就是我目前所拥有的。
<input type="hidden" value="" id="delterms" name="O_" />
<input type="checkbox" id="checkbox" onchange="terms()" />
<script type="text/javascript">
var checked = document.getElementById('checkbox').checked;
function terms() {
if (checked==false)
{
document.getElementById('delterms').value=''
}
else
{
document.getElementById('delterms').value='Accepted'
}
}
</script>
I got it to work but only on the first click, is there anyway to set the value depending on the checkbox status? I suspect there is some far simpler way and I am no doubt over complicating the issue.
我让它工作，但只在第一次点击时，无论如何要根据复选框状态设置值？我怀疑有一些更简单的方法，我毫无疑问使问题复杂化。
回答by maerics
Try adding an event listenerinstead of using the HTML "onchange" attribute, this might clarify things for you and will probably make your code easier to maintain in the long run:
尝试添加事件侦听器而不是使用 HTML 的“onchange”属性，这可能会为您澄清一些事情，并且从长远来看可能会使您的代码更易于维护：
<input type="hidden" id="delterms" value="" name="O_" />
<input type="checkbox" id="checkbox" />
<script type="text/javascript">
var checkbox = document.getElementById('checkbox')
, hidden = document.getElementById('delterms');
checkbox.addEventListener('change', function() {
hidden.value = (this.checked) ? 'Accepted' : '';
}, false);
</script>
The idea is that the anonymous function gets run every time the user clicks the checkbox, which sets the value of the hidden field to either "Accepted" or the empty string, depending on whether or not the box is checked.
这个想法是每次用户单击复选框时都会运行匿名函数，它将隐藏字段的值设置为“接受”或空字符串，具体取决于是否选中该框。
This jsFiddleshows a working example.
这个jsFiddle显示了一个工作示例。
回答by stuartd
Move the variable assignment into the function, thus:
将变量赋值移动到函数中，因此：
function terms() {
var checked = document.getElementById('checkbox').checked;
if (checked==false)
回答by josh.trow
Fixed in a fiddle - use the Event of clicking.
固定在小提琴中 - 使用点击事件。
回答by Claes Mogren
Because checkboxes are not submitted in a form.submit() when they are unchecked I use a hidden field that gets updated when the checkbox is clicked on.
因为复选框在未选中时不会在 form.submit() 中提交，所以我使用了一个隐藏字段，该字段在单击复选框时会更新。
<input type="hidden" id="chbx" value="" name="0_">
<input type="checkbox" id="__chbx"
onclick="document.getElementById('chbx').value =
document.getElementById('__chbx').checked;"/>
(I have omitted the jsp-code that adds the checkedproperty to the checkbox-input if it was already checked when rendering the page.)
（checked如果在呈现页面时已经选中了将属性添加到 checkbox-input的 jsp 代码，我已经省略了。）
回答by niksvp
get the checked value inside your function
获取您的函数中的检查值
<script type="text/javascript">
function terms() {
var checked = document.getElementById('checkbox').checked;
if (checked==false)
{
document.getElementById('delterms').value=''
}
else
{
document.getElementById('delterms').value='Accepted'
}
}
</script>
回答by CodeZombie
Your variable checkedis set only once, so it always equals to the inital value. Move it inside your function terms().
您的变量checked仅设置一次，因此它始终等于初始值。将其移动到您的函数中terms()。
