javascript - 如何使用javascript取消选中复选框

Question

我有以下代码。我需要查看在我的表单中选中了多少个复选框，如果有四个以上的显示错误并取消选中最后一个复选框，一切正常但是我如何取消选中最后一个复选框，谢谢

   function SetHiddenFieldValue()

   {
      var checks = document.getElementById('toppings').getElementsByTagName('input');
      var toppings = new Array();
      var randomNumber = Math.floor((Math.random() * 9000) + 100);
      var totalChecked = 0;
      var itemPrice = 5.99;

    for (i = 0; i < checks.length; i++)
    {
        if (checks[i].checked)
        {
            toppings[i] = checks[i].value;
            totalChecked += 1; 
        }
    }

    if (totalChecked > 4) {
        alert("You can only choose up to Max of 4 Toppings");   
    } else {    
        itemPrice = itemPrice + (totalChecked * 0.99);  
        document.getElementById('my-item-name').value = toppings.join("\t");
        document.getElementById('my-item-id').value = randomNumber;
        document.getElementById('my-item-price').value = itemPrice;
    }
}

我的表格是:

<form id="pizza" name="pizza" method="post" action="" class="jcart">
    <input type="hidden" name="my-item-id" id="my-item-id" value="" />
    <input type="hidden" name="my-item-name" id="my-item-name" value="" />
    <input type="hidden" name="my-item-price" id="my-item-price" value="" />
    <input type="hidden" name="my-item-qty" value="1" />
    <input type="submit" name="my-add-button" value=" add " />
</form>

Answer 1

我想我会以不同的方式处理这个问题。我在每个复选框上都有一个点击处理程序，用于计算选中框的数量(包括当前选中的复选框)以查看它是否大于 4。如果是，那么我将停止当前事件，弹出警报，并重置导致警报的复选框的状态。这样它就会在单击第四个复选框时始终弹出。

要处理禁用 javascript 的情况，您需要确保服务器端代码验证选中的复选框不超过 4 个。

JQuery 示例:

$(':checkbox').click( function() {
   if ($(this).val() == 'on') { // need to count, since we are checking this box
      if ($(':checkbox:checked').length > 4) {
         alert( "You can only choose up to a maximum of 4 toppings." );
         $(this).val('off');
      }
   }
});

请注意，如果您在页面上有其他类型的复选框，您可以使用类来区分它们。在这种情况下，选择器变为 (':checkbox.topping') 和 (':checkbox.topping:checked')。