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

Question

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

Answer 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)"/>
...

Answer 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，这肯定是一个痛苦你的眼睛; 但正如您所看到的，它非常强大，您的问题可以用几行代码解决。 我建议您学习并尝试一下；）

Answer 3

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

Answer 4

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

Answer 5

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

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