Having max 3 checkboxes checked using javascript or jquery

Question

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 thinking of doing this with Javascript but I haven't been successfull so far, here is my HTML code:

<div class="texti">     
<p>Hér getie tie valie ykkar egin álegg </p><h1>ATHUGID</h1><p> bara tv? álegg!</p>
</div>
<br><br> 
<div class ="col-lg-2">
    <h4> Kj?tálegg </h4>
        <form action="includes/pizzaprocess.php" method="POST" name = "theform">
    <input type="checkbox" name="meat[]" value="1" onClick="return KeepCount()">Pepperoni  <br>
    <input type="checkbox" name="meat[]" value="2" onClick="return KeepCount()">Skinka  <br>
    <input type="checkbox" name="meat[]" value="3" onClick="return KeepCount()">Nautahakk  <br>
    <input type="checkbox" name="meat[]" value="4" onClick="return KeepCount()">Beikon  <br> 
    <input type="checkbox" name="meat[]" value="5" onClick="return KeepCount()">Auka Pepperoni  <br>
    <input type="checkbox" name="meat[]" value="6" onClick="return KeepCount()">Kjúklingur  <br> 
</div>

<div class="col-lg-2">
    <h4> Ostar </h4>
    <input type="checkbox" name="cheese[]" value="7" onClick="return KeepCount()">Gráeostur  <br>
    <input type="checkbox" name="cheese[]" value="8" onClick="return KeepCount()">Cheddarostur  <br>
    <input type="checkbox" name="cheese[]" value="9" onClick="return KeepCount()">Extra Ostur  <br>
    <input type="checkbox" name="cheese[]" value="10" onClick="return KeepCount()">Lítill Ostur  <br> 
    <input type="checkbox" name="cheese[]" value="11" onClick="return KeepCount()">Enginn Ostur  <br>
    <input type="checkbox" name="cheese[]" value="12" onClick="return KeepCount()">Rjómaostur  <br> 
    <input type="checkbox" name="cheese[]" value="13" onClick="return KeepCount()">Piparostur  <br>
</div>

<div class="col-lg-2">
    <h4> Gr?nt </h4>
    <input type="checkbox" name="greens[]" value="14" onClick="return KeepCount()">Gr?n Papripa<br>
    <input type="checkbox" name="greens[]" value="15" onClick="return KeepCount()">Laukur<br>
    <input type="checkbox" name="greens[]" value="16" onClick="return KeepCount()">Tómatsneiear<br>
    <input type="checkbox" name="greens[]" value="17" onClick="return KeepCount()">Sveppir<br> 
    <input type="checkbox" name="greens[]" value="18" onClick="return KeepCount()">Ananas<br>
    <input type="checkbox" name="greens[]" value="19" onClick="return KeepCount()">Jalapenos<br> 
    <input type="checkbox" name="greens[]" value="20" onClick="return KeepCount()">Svartar ólífur<br>
    <input type="checkbox" name="greens[]" value="21" onClick="return KeepCount()">Hvítlaukur<br>
    <input type="checkbox" name="greens[]" value="22" onClick="return KeepCount()">Rauelaukur<br>
    <input type="checkbox" name="greens[]" value="23" onClick="return KeepCount()">Spínat<br>

    <input type="submit"/>
</form>
</div>

I was hoping to use javascript to limit them to two using something like this:

  <script type="text/javascript">
function KeepCount() 
{

var NewCount = 0

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>

Please ignore the fact it's in Icelandic please, and thank you in advance!

Answer 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>