javascript - 在多个类别的jQuery中选择多个复选框

我正在尝试使用jQuery配置多个复选框，

我希望用户最多可以在2个不同类别中选择8个复选框。

目前，用户可以选择8个复选框，但我不限于2个类别。

$(document).ready(function () {
    $("input[name='tech']").change(function () {
        var maxAllowed = 8;
        var cnt = $("input[name='tech']:checked").length;
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select maximum ' + maxAllowed + ' technologies!!');
        }
    });
});

完整的代码示例：https://jsfiddle.net/zy34p5cy/2

任何想法？

最佳答案

给每个组一个独特的属性，逻辑易于遵循

$(document).ready(function () {
    $("input[name='tech']").change(function () {
        var maxAllowed = 8;
        var maxgr =2;
        var cnt = $("input[name='tech']:checked").length;
        var groups = [];
        $("input[name='tech']:checked").each(function () {
   groups.push( $(this).attr('group'));
   if ($.unique(groups).length>2){
   $(this).prop("checked", "");
    alert('You can select maximum ' + maxgr + ' groups!');

   }
});

        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select maximum ' + maxAllowed + ' categories!');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Select multi checkbox inside 2 categories max:</h3>

<div class="col-xs-4">
  <h5>Category 1</h5>
  <input type="checkbox" group="c" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="c" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 2</h5>
  <input type="checkbox" group="a" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="a" name="tech" value="Mootools" /> checkbox
  <br/>
</div>

<div class="col-xs-4">
  <h5>Category 3</h5>
  <input type="checkbox" group="b" name="tech" value="jQuery" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="JavaScript" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="Prototype" /> checkbox
  <br/>
  <input type="checkbox" group="b" name="tech" value="Dojo" /> checkbox
  <br/>
  <input type="checkbox" group="b"  name="tech" value="Mootools" /> checkbox
  <br/>
</div>