Question

所以我为我的最终项目设置了这个比萨饼订购应用程序，但是我需要将最多的浇头数量设为两个，所以我必须将我的可检查复选框限制为两个，我想用Javascript做这个但是我到目前为止还没有成功，这是我的HTML代码：

<div class="texti">     
<p>Hér getið þið valið ykkar egin álegg </p><h1>ATHUGIÐ</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áðostur  <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ómatsneiðar<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()">Rauðlaukur<br>
    <input type="checkbox" name="greens[]" value="23" onClick="return KeepCount()">Spínat<br>

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

我希望使用javascript将它们限制为两个使用类似的东西：

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

请忽略冰岛语中的事实，并提前感谢您！

Answer 1

每次单击复选框时，您的计数器变量都会重置为零。你应该将它移出函数：

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

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

}

Answer 3

如果使用以下内容，您可以删除HTML中的所有onClick内联调用，这也会阻止选择后续复选框选项：

$(':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/

Answer 4

使用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/

使用javascript或jquery检查最多3个复选框

4 个答案: