限制要检查的复选框数量jQuery

我有一个包含多组复选框的网页（在每个组中，所有复选框共享同一类）。 我不仅想限制可以选中的复选框的数量，还想限制以下内容-如果要选中的复选框的最大数量是3，并且用户选中了第4个复选框，而不是显示消息，我想取消选中最长时间之前选中的复选框。考虑到我有多组复选框，且每组有不同的最大允许复选框数，这是如何实现的

顺便说一句，我没有使用jQuery UI复选框元素

---

谢谢

要将一个事件附加到一组复选框中，可以使用jQuery的

delegate

方法，如下所示：

$('#checkbox-container').delegate('checkbox', 'change', function (event) {
  // event.target is the clicked checkbox element here
});

---

要将事件附加到一组复选框，可以使用jQuery的

delegate

方法，如下所示：

$('#checkbox-container').delegate('checkbox', 'change', function (event) {
  // event.target is the clicked checkbox element here
});

---

首先，你必须：

将事件附加到这些复选框

存储有关检查它们的时间的信息

如果选中的复选框是第四个复选框，则找到第一个复选框并取消选中

您可以使用jQuery的以下功能：

• .delegate（）

  ，

  change（）

  ，

  live（）

  或

  绑定（）

  以附加事件

• data-

  HTML属性来存储JS时间戳（例如，您可以使用
  ）

• .parents（）

  要选择复选框组的容器
• jQuery的

  .each（）

  函数遍历同一组（上述同一容器）中的所有复选框

---

通过使用这些功能，您应该实现您需要的功能。

首先，您必须：

将事件附加到这些复选框

存储有关检查它们的时间的信息

如果选中的复选框是第四个复选框，则找到第一个复选框并取消选中

您可以使用jQuery的以下功能：

• .delegate（）

  ，

  change（）

  ，

  live（）

  或

  绑定（）

  以附加事件

• data-

  HTML属性来存储JS时间戳（例如，您可以使用
  ）

• .parents（）

  要选择复选框组的容器
• jQuery的

  .each（）

  函数遍历同一组（上述同一容器）中的所有复选框

---

通过使用这些功能，您应该可以实现所需的功能。

我对这个问题的第一个想法是：

var checkorder = [];
$('input:checkbox.checkboxes').click(
    function(){
        checkorder.push($(this).index('input:checkbox'));
        if (checkorder.length > 3){
            $('input:checkbox.checkboxes').eq(checkorder[0]).removeProp('checked');
            checkorder.splice(0,1);
        }
    });

这种方法的问题：

它将选择应用于具有相同

类的所有复选框

不区分单击以选中或取消选中复选框

---

参考资料：

---

我对这个问题的第一个想法是：

var checkorder = [];
$('input:checkbox.checkboxes').click(
    function(){
        checkorder.push($(this).index('input:checkbox'));
        if (checkorder.length > 3){
            $('input:checkbox.checkboxes').eq(checkorder[0]).removeProp('checked');
            checkorder.splice(0,1);
        }
    });

这种方法的问题：
• 它将选择应用于具有相同

  类的所有复选框

• 不区分单击以选中或取消选中复选框

---

参考资料：
---

你能提供你目前掌握的代码以及你的困境吗？我只是不知道该怎么做。从技术上讲，我可以只捕获特定组的更改事件，然后查看该组上所有复选框的状态并解决它-但是如何仅为特定组创建事件，以及如何检查特定组中的哪些复选框被选中？可以使用jQuery的delegate（）方法只截取一些复选框单击，如果它们位于同一父元素下（例如
），它们位于特定的div下-我该怎么做？至少要回答这个问题，如果你愿意，请继续在评论中询问，我会编辑。你能提供你到目前为止的代码吗？你在哪里遇到了困难？我只是不知道该怎么做。从技术上讲，我可以只捕获特定组的更改事件，然后查看该组上所有复选框的状态并解决它-但是如何仅为特定组创建事件，以及如何检查特定组中的哪些复选框被选中？可以使用jQuery的delegate（）方法只截取一些复选框单击，如果它们位于同一父元素下（例如
），它们位于特定的div下-我该怎么做？至少要回答这个问题，如果你愿意，请继续在评论中提问，谢谢你的输入。我的实际复选框在td内、tr内、表内、div内。我可以让div或表为每个组都有一个唯一的id，但这是：$（'div id'）。委托（'checkbox'，'change'，函数（event）{alert（“change to checkboxs”）；}）；不会触发任何东西。这是为什么？@Raiders：因为你刚才引用的搜索是
标记，而不是
标记。尝试用

'input[type=“checkbox”]

替换

'checkbox'

，它应该可以工作。作为证据。@Raiders:Btw.如果这对您没有影响，您可能希望为每组复选框指定相同的类（为包含单个组中的复选框的容器指定类，例如

checkGroup

）-这将更容易区分哪些是组，哪些不是组（不需要检查区分组的多个ID）。然后，您将能够只计算当前选中复选框所在的具有

checkGroup

类的同一容器中的选中复选框。感谢您的输入。我的实际复选框位于td内、tr内、表格内、div内。我可以让div或表格为每个组都有唯一的id，但this:$（'#div id'）.delegate（'checkbox'，'change'，function（event）{alert（'change to checkb