如果复选框：选中超过3个，则应取消选中

Question

我有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);
}
});

Answer 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选择器也很方便。

Answer 2

你可以像fllowing一样。

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" />

Answer 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));
    }
});

检查一下，最后一次会改变。