如果复选框：选中超过3个，则应取消选中 [英] If checkbox :checked more than 3 last one should unchecked

问题描述

我有6 输入[type =checkbox] 。

用户一次只能选择3个复选框。

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

查找图片附件以了解更多信息。

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

因为，我不能创建这个逻辑，所以我做了谜语演示，如果选择超过3.当前的一个没有被选中。 p>

Find fiddle demo

  $（'input [type = checkbox]'）。 b var num_checked = $（input [type = checkbox]：checked）。length; 
 if（num_checked> 3）{
 $（e.target）.prop ）; 
} 
}）; 
  

解决方案

您需要存储对最后选择的复选框的引用。也许像这样：

  var lastChecked; var $ checks = $（'input：checkbox'）。 = checks.filter（'：checked'）。length; if（numChecked> 3）{alert（对不起，你已经选择了3个复选框！）; lastChecked.checked = false;} lastChecked = this; ;  

 < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 2.1.1 / jquery.min.js>< / script>< input type =checkboxname =/> < br />< input type =checkboxname =/> < br />< input type =checkboxname =/> < br />< input type =checkboxname =/> < br />< input type =checkboxname =/> < br />< input type =checkboxname =/>  

我也通过在变量中缓存checkbox集合来改进代码，所以你不需要重新查询DOM。 ：checkbox 选择器也很方便。

I have 6 input[type="checkbox"].

User can select only 3 checkbox at a time.
If user selects the 4th checkbox then last checked(3rd checkbox) should unchecked.

Find image attachment for better understanding.

Meanwhile, if User selects 5th last selected (4th) should deselect.

As, I'm not able to create this logic so that I made fiddle demo in which if selected more than 3. The current one is not getting selected.

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

解决方案

You will need to store reference to the last selected checkbox. Maybe like this:

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

I also improved code a little by caching checkbox collection in variable so you don't re-query DOM again and again. :checkbox selector is handy too.

这篇关于如果复选框：选中超过3个，则应取消选中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！