如何撤消最后选中的复选框？答案

【问题标题】：How to undo the last checked checkbox?如何撤消最后选中的复选框？
【发布时间】：2010-10-12 16:06:23
【问题描述】：

您好，我创建了一个 javascript 函数来检查所选模块的数量是否大于给定值。因此，每次调用复选框时都会调用该函数，该函数会遍历所有复选框并计算总数以查看它是否更大。但问题是当用户选中复选框时，如果总积分大于值，我想将复选框设置为选中=false。但我不知道要撤消哪个复选框。 javascript中是否有撤消最后点击功能？

【问题讨论】：

标签： javascript checkbox undo

【解决方案1】：

并非如此，但您可以通过保存最后一个单击的框来轻松伪造它。此代码可能无法逐字运行，但您明白了：

<script>
var last_checked_box;

function onBoxClicked( box ) {
   if ( box.checked ) last_checked_box = box;
}

function undoLastBox() {
   if ( last_checked_box ) last_checked_box.checked = false;
}
</script>

<input type="checkbox" id="box1" onClick="onBoxClicked(this)"/>
...

【讨论】：

这可以解决问题，但在这里您缺少计算上限的正确函数。我在回答中给你一个完整的解决方案:)
@Eric：为什么要保存盒子的 id 而不是盒子本身的引用，即last_checked_box = box？
@SebaGR - 您的回答更适合他的特定情况，但可能在 Google 搜索中找到此问题的其他人可能没有相同的要求。我也不想假设他会使用 jQuery。
@Christoph - 没有特别的原因，这只是我想到的第一件事:)
@Eric：好的。只是这样做让我想起了告诉站在你旁边的人如果他们想和你说话就打电话给你的手机；）

【解决方案2】：

使用jQuery，您可以执行以下操作：

var MAX_CREDITS = 50; // just as an example
$("input[type=checkbox]").change(function (){
  var totalCredits = 0;
  $("input[type=checkbox]").each(function (){
    // augment totalCredits accordingly to each checkbox.
  });

  if(totalCredits > MAX_CREDITS){
    $(this).removeAttr("checked");
  }
});

如果您以前从未使用过 jQuery，这肯定会让您的眼睛感到痛苦；但正如您所看到的，它非常强大，您的问题可以在几行内解决。我建议您学习并尝试一下；）

【讨论】：

【解决方案3】：

我知道这不是您要寻找的答案，但是当达到最大检查次数时禁用所有未选中的复选框会不会更好的用户体验？

【讨论】：

这对任何用户来说都是不正常的行为......它不会成为用户友好的体验。
@SebaGR：为什么？显示一条消息，通知用户已达到总量，然后禁用所有未选中的框并在视觉上标记适当的标签，这听起来对我来说非常有用
我同意。您可以通过计算剩余数量并禁用这些复选框来扩展体验，如果选中，这些复选框将增加超过最大数量。这样，如果 max=50 并且您选择了 47，则 value=5 的复选框将被禁用，而 value=3 的复选框仍然可用:)

【解决方案4】：

我不认为有，但您始终可以保存对最后一个复选框的引用，因此当您必须取消选中它时，它就在那里。

【讨论】：

这正是他所要求的！ :P

【解决方案5】：

我建议测试是否已检查最大对象数，如果为真，则以相同的方法删除所有检查，或者将某个隐藏文本框的值设置为上次选中复选框的 id，以便您可以再次引用它。

【讨论】：

【解决方案6】：

这是一个最小但功能齐全且无 jQuery 的解决方案：

<script>
function isBox(element) {
    return element.form && element.form === document.forms[0] &&
        element.nodeName.toLowerCase() === 'input' &&
        element.type === 'checkbox';
}

function remaining(dR) {
    var field = document.forms[0].elements[0],
        value = +field.value;

    if(dR) return field.value = value + dR;
    else return value;
}

function listener(event) {
    var box = (event && event.target) ||
        (window.event && window.event.srcElement);

    if(isBox(box)) {
        if(box.checked) {
            if(remaining() > 0)
                remaining(-1);
            else box.checked = false;
        }
        else remaining(+1);
    }
}

if(document.addEventListener)
    document.addEventListener('click', listener, false);
else if(document.attachEvent)
    document.attachEvent('onclick', listener);
</script>
<form>
 <p>remaining: <input type="text" readonly="readonly" value="2"></p>
 <p><input type="checkbox" id="b1"><label for="b1">box1</label></p>
 <p><input type="checkbox" id="b2"><label for="b2">box2</label></p>
 <p><input type="checkbox" id="b3"><label for="b3">box3</label></p>
</form>

【讨论】：