如果复选框：选中超过 3 个最后一个应取消选中答案

【问题标题】：If checkbox :checked more than 3 last one should unchecked如果复选框：选中超过 3 个最后一个应取消选中
【发布时间】：2016-05-13 17:21:46
【问题描述】：

我有 6 个input[type="checkbox"]。

用户一次只能选择 3 个复选框。
如果用户选择第 4 个复选框，则最后选中的（第 3 个复选框）应取消选中。

查找图片附件以便更好地理解。

同时，如果用户选择最后选择的第 5 个（第 4 个）应取消选择。

因为，我无法创建此逻辑，因此我制作了小提琴演示，其中如果选择超过 3 个。当前未选择。

Find fiddle demo

$('input[type=checkbox]').click(function(e) {
var num_checked = $("input[type=checkbox]:checked").length;
if (num_checked > 3) { 
  $(e.target).prop('checked', false);
}
});

【问题讨论】：

标签： jquery html checkbox click

【解决方案1】：

您需要存储对最后选中复选框的引用。可能是这样的：

var lastChecked;

var $checks = $('input:checkbox').click(function(e) {
    var numChecked = $checks.filter(':checked').length;
    if (numChecked > 3) {
        alert("sorry, you have already selected 3 checkboxes!");
        lastChecked.checked = false;
    }
    lastChecked = this;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="" /> <br/>
<input type="checkbox" name="" /> <br/>
<input type="checkbox" name="" /> <br/>
<input type="checkbox" name="" /> <br/>
<input type="checkbox" name="" /> <br/>
<input type="checkbox" name="" />

我还通过在变量中缓存复选框集合来稍微改进代码，这样您就不会一次又一次地重新查询 DOM。 :checkbox 选择器也很方便。

【讨论】：

为什么在处理复选框时使用click 而不是change？

【解决方案2】：

你可以像流动一样做。

var last;
$('input[type="checkbox"]').change(function () {
    if (this.checked) {
        if ($('input[type="checkbox"]:checked').length > 3) {
            $(last).prop('checked', false);
        }
        last = this;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />

【讨论】：

【解决方案3】：

var checked = [];
$('input[type=checkbox]').click(function(e) {
    var num_checked = $("input[type=checkbox]:checked").length;
    if (num_checked > 3) {
        checked[checked.length - 1].prop('checked', false);
        checked.pop();
    }
    if($.inArray($(this), checked) < 0){
        checked.push($(this));
    }
});

看看这个，最后一个每次都会改变。

【讨论】：

dsfq 和 Azim 给出了很好的答案。你的回答也不错。谢谢大家。