Javascript 除了jQuery函数之外，还有其他限制复选框类型选择的方法吗？

我已经编写了一个jQuery函数，将复选框的选择限制为4个项目，问题是：它只在标签输入时工作！但是当我把这个标签放在一张桌子里面或者一张桌子里面的时候，它就不起作用了

我已尝试删除标记，使jQuery方法可以正常工作，但在实现中，我需要此标记在表中显示我的项

这是我的html代码：

<c:forEach var="tempVehicles" items="${vehicleList}">
     <tr>
         <c:choose>
              <c:when test="${tempVehicles.vehicleType eq vehicleType}">
                    <td>${tempVehicles.registration}  </td>
                    <td><input class="single-checkbox" type="checkbox" id="vIds[]" name="vIds[]" value="${tempVehicles.id}"/></td>
              </c:when>
          </c:choose>
     </tr>
</c:forEach>

---

使用这段代码，我可以选择4个以上的元素“jQuery方法不起作用”，但当我从输入中删除标记时，该方法实际上起作用。

由于您的输入不是同级，请更改选择器以检查选择了多少元素，如以下代码所示

$'input[type=checkbox]'。在'change'，函数{ var限值=4； 如果$'。单个复选框：选中。'。长度>=限制{ 此项检查=错误； } };

---

看起来输入是tds的子元素-它们不是同级元素，所以同级元素不会选择正确的元素

如果它们都具有相同的单复选框类，则将.single复选框放入jQuery集合中，并在回调中检查该集合的长度（过滤条件：checked）是否大于限制：

const$singleCheckbox=$'input.singleCheckbox'； $singleCheckbox.on'change'，function e{ var限值=4； 如果$singleCheckbox.filter'：选中'.length>limit{ 此项检查=错误； } };

---

您可以通过向上查询父级，然后向下查询其子级来施加检查限制

$ => { $.fn.checkLimit=功能限制{ 这是一个关于“改变”的函数{ 让$parent=$this.parent； 让$target=$parent.prop'tagName'=='LABEL'？$parent.parent:$parent； 如果$target.find“：已选中”。长度>限制{ 此项检查=错误； } }; } }jQuery； $'input[name=vIds[]]'。检查限制4； 演示：共享相同名称的复选框 定期检查你参加的运动或健身活动的类型

骑脚踏车兜风 跑步 参观健身房 游泳 团体运动 另外

---

可能是因为您的输入不是。兄弟姐妹感谢您的帮助，您的解决方案实际上是有效的。谢谢。如果它不起作用，我不会把它作为一个答案发布@AdamObaidi:p

$('input[type=checkbox]').on('change', function() {

    var limit = 4;

    if($(this).siblings(':checked').length >= limit) {

        this.checked = false;
    }
});