Having Max 3 Checkboxes Checked Using Javascript Or Jquery

So I have this pizza-ordering application for my final project, but I need to have the max amounts of toppings be two, so I have to limit my checkable checkboxes to two, I was thin

Solution 1:

Your counter variable is getting reset to zero each time they click a checkbox. You should move it out of the function:

<script type="text/javascript">

   var NewCount = 0;
   function KeepCount() 
   {

       if (document.theform.meat[].checked)
       {NewCount = NewCount + 1}

       if (document.theform.cheese[].checked)
       {NewCount = NewCount + 1}

       if (document.theform.greens[].checked)
       {NewCount = NewCount + 1}

       if (NewCount == 3)
       {
           alert('Pick Just Two Please')
           document.first,second,thinrd; return false;
       }

   } 
</script>

Solution 2:

function KeepCount() {

  // Count the number of checkmarks in each category.
  function countChecked(list) {
    var count = 0;

    for (var i = 0; i < list.length; i++) {
      var el = list[i];
      if (el.checked) {
        count++;
      }
    }
    return count;
  }


  var NewCount = 0


  // Check the meats
  var topping = document.getElementsByName("meat[]");
  NewCount += countChecked(topping);


  var topping = document.getElementsByName("cheese[]");
  NewCount += countChecked(topping);

  var topping = document.getElementsByName("greens[]");
  NewCount += countChecked(topping);


  if (NewCount >= 3) {
    alert('Pick Just Two Please')
    return false;
  }

}

Solution 3:

You can get rid of all the onClick inline calls in your HTML if you use the following, this also will prevent subsequent checkbox options from being selected:

$(':input').click(function(event) {
    var count = 0;
    $(':input').each(function () {
        if (this.checked)
        {
            count++;   
        }
    });
    if (count > 2)
    {
        event.preventDefault();
        alert('Pick just two please!');
    }
});

jsFiddle: http://jsfiddle.net/72CGc/35/

Solution 4:

With jquery

<script>
    $().ready(function () {

        // your topping 'names' here
        var groups = ['meat[]', 'cheese[]', 'greens[]'];

        // for each group..
        $.each(groups, function (idx, groupName) {

            // ..find all checkboxes inside
            var $group = $('.col-lg-2').find('input[name="' + groupName + '"]');

            // and catch click
            $group.click({ group: $group }, function (event) {

                // on click event calculate sum of checked checkboxes
                var count = 0;
                $.each(event.data.group, function (idx, input) {
                    count += (input.checked ? 1 : 0);

                }); // each input in group

                // warning the user
                if (count > 2) {
                    alert('2 only!');
                    event.preventDefault();
                    return;
                }

            });

        }); // each topping

    });
</script>

jsFiddle: http://jsfiddle.net/qAsR3/