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>

如何撤消上次复选的复选框？

6 个答案: