Jquery按值更改函数[重复]答案

【问题标题】：Jquery on change function by value [duplicate]Jquery按值更改函数[重复]
【发布时间】：2021-09-07 05:24:38
【问题描述】：

我有这个 html 代码

<div class="toppings">
  <p>Would you like to add toppings?</p>
  <input class="single-checkbox" type="checkbox" name="pineapple" value="pizza1">Pineapple<br>
  <input class="single-checkbox" type="checkbox" name="onions" value="pizza1">Onions<br>
  <input class="single-checkbox" type="checkbox" name="sausage" value="pizza1">Sausage<br>
  <input class="single-checkbox" type="checkbox" name="pepperoni" value="pizza1">Pepperoni<br>
  <input class="single-checkbox" type="checkbox" name="mushrooms" value="pizza1">Mushrooms<br>
</div>

我该怎么做才能使用户只能按值选择其中 3 个复选框？因为我使用的 wordpress 插件不允许我更改任何其他参数。而且我有 5 种不同的比萨饼。

【问题讨论】：

这里的“按价值”是什么意思？
"JavaScript Limit number of checkboxes selected" 似乎是在 Google 上运行的一个很好的搜索，
顺便说一下，您应该使用"pizza1" 作为所有复选框输入元素的name，并使用顶部名称（例如“onions”、“sausage”...）作为value 属性。

标签： html jquery onchange

【解决方案1】：

let checkedBoxes = 0;
$("div.toppings").find("input[value=pizza1]").click(function() {
    if ($(this).prop("checked")) {
        if (checkedBoxes >= 3) {
            this.prop("checked", false);
        } else {
            checkedBoxes++;
        }
    } else {
        checkedBoxes--;
    }
});

【讨论】：

请注意，可以在没有更高范围内的变量的情况下执行此操作，或者必须保持计数。还要小心在复选框上使用click 事件，因为可以使用键盘选择它们，并且在这种情况下，某些较旧的浏览器可能不会触发click 事件。有关详细信息，请参阅副本中链接的答案。