Select multiple checkboxes in multi categories jQuery

Question

I'm trying to configure multiple checkboxes with jQuery,

I want User can select 8 checkboxes max inside 2 different categories max.

Currently User can select 8 checkboxes but I don't how to restrict to 2 categories.

$(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!!');
        }
    });
});

Full code example: https://jsfiddle.net/zy34p5cy/2

Any idea?

Ali · Accepted Answer · 2017-11-09 16:14:02Z

1

There many possible solutions. For example using classes. Like this https://jsfiddle.net/zy34p5cy/16/

    var maxAllowed = 8;
    var cnt = $("input[name='tech']:checked").length;
    var cat1 = $("input.cat1[name='tech']:checked").length > 0 ? 1 : 0;
    var cat2 = $("input.cat2[name='tech']:checked").length > 0 ? 1 : 0;
    var cat3 = $("input.cat3[name='tech']:checked").length > 0 ? 1 : 0;
    var cats = cat1 + cat2 + cat3
    if (cnt > maxAllowed || cats > 2) ...

answered Nov 9, 2017 at 16:14

Ali

2,2102 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karen · Accepted Answer · 2017-11-09 16:16:02Z

A simplistic approach would be as follows:

<h3>Select multi checkbox inside 2 categories max:</h3>

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

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

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


$(document).ready(function () {
    var maxAllowedCheckboxes = 8;


    $("input[name='tech1']").change(function () {
      restrictCheckboxSeletions($(this));
    });
    $("input[name='tech2']").change(function () {
      restrictCheckboxSeletions($(this));
    });
    $("input[name='tech3']").change(function () {
      restrictCheckboxSeletions($(this));
    });

    function restrictCheckboxSeletions(checkbox) {
      var countTech1 = $("input[name='tech1']:checked").length;
        var countTech2 = $("input[name='tech2']:checked").length;
        var countTech3 = $("input[name='tech3']:checked").length;
        if (countTech1 > 0 && countTech2 > 0 && countTech3 > 0) {
          checkbox.prop("checked", "");
            alert('You can only select from 2 categories!');
        } else {
          var totalCount = countTech1 + countTech2 + countTech3;
            if (totalCount > maxAllowedCheckboxes) {
              checkbox.prop("checked", "");
              alert('You can select maximum ' + maxAllowedCheckboxes + ' categories!');
            }
        }
    }

});

Dev · Accepted Answer · 2017-11-09 17:03:31Z

I have included data-attribute in your html input.

<h3>Select multi checkbox inside 2 categories max:</h3>

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

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

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

and modified the JS as follows:

$(document).ready(function () {
    $("input[name='tech']").change(function () {

        maxAllowed = 8;
        var count = 1;
        var first = $("input[name='tech']:checked:first").data("category");
        var cnt = $("input[name='tech']:checked").length;
        if (cnt > maxAllowed) {
            $(this).prop("checked", "");
            alert('You can select maximum ' + maxAllowed + ' categories!');
        }

        var cat = $("input[name='tech']:checked").each(function(index) {
            if($(this).data('category') != first)
            count ++;
            if(count > 2)
            alert("Can't have more than two categories");
        });  
    });
});

Hope it helps.

Mihai · Accepted Answer · 2017-11-09 16:16:34Z

Give each group a distinct property,the logic is easy to follow

$(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>

Collectives™ on Stack Overflow

Select multiple checkboxes in multi categories jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related