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')。

Answer 2

跟踪上次选中的复选框并将其checked属性设置为false：

// ...
var lastChecked; // Will be used in loop below
for (i = 0; i < checks.length; i++)
{
    if (checks[i].checked)
    {
        toppings[i] = checks[i].value;
        totalChecked += 1;
        lastChecked = i; // Store the checkbox as last checked
    }
}

if (totalChecked > 4) {
    alert("You can only choose up to Max of 4 Toppings");
    checks[lastChecked].checked = false; // Uncheck the last checked checkbox
} else {
// ...

如果您要取消选中除前四个之外的所有内容，请执行以下操作：

// ...
for (i = 0; i < checks.length; i++)
{
    if (checks[i].checked)
    {
        toppings[i] = checks[i].value;
        totalChecked += 1;
        if (totalChecked > 4) checks[i].checked = false; // Uncheck checkbox
    }
}

Answer 3

嗯，你需要以某种方式传递给这个方法，只检查了哪个特定的复选框，然后如果总检查计数测试失败，那么只需将该复选框的.checked属性设置为false。 / p>

Answer 4

如果用户选中了五个以上该怎么办？

一种方法是创建一个javascript函数，如果选中了四个以上的复选框，则返回false。在每个复选框中，挂钩新功能如下：

<input type="checkbox" onclick="return myNewFunction(this);">

这将禁止用户检查任何第五个复选框。

Answer 5

或者，您可以通过在选中其中四个框后禁用所有其他框并阻止用户首先执行无效操作，并显示“最多选择其中四个”这样的消息。这样，你就不会让用户做你认为无效的事情，然后责骂他们。

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

5 个答案: