如何使用 Javascript 根据复选框的状态更改隐藏输入的值？答案

【问题标题】：How do I use Javascript to change value of a hidden input depending on status of a checkbox?如何使用 Javascript 根据复选框的状态更改隐藏输入的值？
【发布时间】：2011-06-07 15:35:50
【问题描述】：

我正在尝试更改隐藏输入字段的值，具体取决于复选框的值。我对 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>

我让它工作但只在第一次点击时，是否有根据复选框状态设置值？我怀疑有一些更简单的方法，我毫无疑问会使问题复杂化。

【问题讨论】：

标签： javascript checkbox state onchange

【解决方案1】：

尝试添加 event listener 而不是使用 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>

这个想法是，每次用户单击复选框时都会运行匿名函数，这会将隐藏字段的值设置为“已接受”或空字符串，具体取决于复选框是否被选中。

jsFiddle 显示了一个工作示例。

【讨论】：

您好，感谢您的回复。我明白你在说什么，但不明白我是如何得到这个来更新隐藏字段的，你有机会详细说明一下吗？
@Dave：我更新了我的答案以展示一种更可靠的方法，如果它对你有意义，请告诉我。

【解决方案2】：

将变量赋值移动到函数中，因此：

function terms() {
    var checked = document.getElementById('checkbox').checked;
    if (checked==false)

【讨论】：

【解决方案3】：

在小提琴中修复 - 使用点击事件。

http://jsfiddle.net/hSMbf/1/

【讨论】：

【解决方案4】：

由于未选中复选框时未在 form.submit() 中提交复选框，因此我使用了一个隐藏字段，该字段在单击复选框时会更新。

<input type="hidden" id="chbx" value="" name="0_">
<input type="checkbox" id="__chbx" 
    onclick="document.getElementById('chbx').value = 
             document.getElementById('__chbx').checked;"/>

（如果在渲染页面时已经检查了 checked 属性，我已经省略了将 checked 属性添加到复选框输入的 jsp 代码。）

【讨论】：

【解决方案5】：

您的变量checked 仅设置一次，因此它始终等于初始值。将其移动到您的函数terms()。

【讨论】：

【解决方案6】：

在你的函数中获取检查值

    <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>

【讨论】：