从复选框的 onclick 函数返回 false答案

【问题标题】：Returning false from checkbox's onclick function从复选框的 onclick 函数返回 false
【发布时间】：2018-12-03 17:31:15
【问题描述】：

我想手动控制是否选中了给定的复选框。出于这个原因，我提供了一个自定义的onclick 函数和return false ：我的想法是如果我不return false，那么默认操作（恢复input 的checked 标志）将覆盖什么我正在设置我的自定义函数。

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = false
  else
    input.checked = true
  
  return false
}

&lt;input type="checkbox"/&gt;

但是，这不起作用。 return false 还原我所做的！它将复选框重置为单击之前的状态！

删除return false 也不好：然后复选框在单击它之前强制自己进入不的状态，再次覆盖我在自定义onclick 函数中所做的任何事情：

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = true // click should be futile
  else
    input.checked = false //click should be futile
}

&lt;input type="checkbox"/&gt;

如何手动控制复选框是否被点击？如何使复选框不覆盖我在自定义 onclick 处理程序中设置的任何内容？

【问题讨论】：

我不确定发生了什么，但这似乎有效：jsfiddle.net/khrismuc/9mtby6es
我不确定你到底想做什么，但要小心使用带有复选框的“onclick”。有多种方法可以更改不涉及单击它们的复选框，例如 Tab 键和按空格键，或使用辅助功能软件。观看change 事件比观看click 事件要好得多。 change 是您真正关心的（有人试图更改复选框的状态），而您并不真正关心他们是如何做到的（单击或其他方式）。
另外，您的目标似乎是防止复选框更改。如果是这样，那么您应该禁用该复选框（使用disabled 属性），而不是提供令人困惑的用户体验，允许某人尝试更改它，只是为了恢复该框。
@Nate 感谢您对change 事件的评论。至于我想要做什么：为在线游戏实现一个团队建设者。用户必须从所有可用的怪物中选择 8 个怪物。对于每个怪物，用户必须选择一些动作。因此，如果用户尝试检查可用怪物附近的复选框但尚未自定义其动作，我想显示一个模式，允许用户为该怪物选择动作并延迟检查复选框，直到动作被填写。或者如果移动已经自定义，请立即选中该框并将团队保存到 cookie（仍然执行处理程序）
@Nate 这就是为什么我不想完全禁用该框的原因。我想允许用户选中复选框。我只是想在他们尝试这样做时提示他们提供更多数据。

标签： javascript checkbox onclick

【解决方案1】：

尝试从函数返回值而不是设置它们：

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    return true // click should be futile
  else
    return false //click should be futile
}

&lt;input type="checkbox"/&gt;

这里，复选框的值一旦被选中就不能修改。这就是你所追求的吗？

【讨论】：

谢谢，虽然我不确定这里发生了什么？我的意思是当未选中该框时，处理程序返回false，但单击它会检查它。那么return false 究竟做了什么？我能看到的唯一两种可能的语义是（a）将框设置为未选中或（b）将框设置为单击之前的状态。 (a) 并非如此，因为该框已被选中。 (b) 也不是这种情况，因为该框在单击之前未选中，但它被设置为选中。那么这里发生了什么？ return false 的语义是什么？
@gaazkam 尝试交换两个return 语句 - 它可以防止复选框被选中。本质上，我的代码一旦满足该状态，就会将复选框锁定在某个状态——该状态是if-else 语句中包含return true 的任何部分。如果切换return 语句，则无法选中复选框 - 它将被锁定在未选中状态。

【解决方案2】：

为什么要这样做？如果你想根据一些数据设置复选框的状态，有一些简单的方法。或者，如果您想从不同的地方触发更改复选框的状态，您应该在其他地方添加 onClick 事件，而不是复选框本身。

【讨论】：

我为什么要这样做？我正在尝试为在线游戏实施团队建设者。用户必须从所有可用的怪物中选择 8 个怪物。对于每个怪物，用户必须选择一些动作。因此，如果用户尝试检查可用怪物附近的复选框但尚未自定义其动作，我想显示一个模式，允许用户为该怪物选择动作并延迟检查复选框，直到动作被填写。或者如果移动已经自定义，请立即选中该框并将团队保存到 cookie（仍然执行处理程序）

【解决方案3】：

我还原了你的真假。如果条件不满足使用这个。如果遇到其他情况，请使用。在你选择怪物的动作后，从模态框的复选框设置值。

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = false
  else
    input.checked = true 
}

&lt;input type="checkbox"/&gt;

let input = document.getElementsByTagName('input')[0]

input.onclick = function() {
  if(input.checked)
    input.checked = true // click should be futile
  else
    input.checked = false //click should be futile
}

&lt;input type="checkbox"/&gt;

【讨论】：