如何使用javascript根据输入元素类限制多组复选框选择

Question

我想根据输入元素的类来限制复选框输入。

一级限2
二级限4

我的代码根本无法限制复选框的选择。所以，我想知道在 JavaScript 中使用输入元素类的正确方法，因为我有很多组。以前，我为每个组添加 div 并将类名设置为与输入元素类相同。有用。当我想放入表格时，我无法按 div 拆分表格行。所以，我删除了 div。没有 div，它不起作用。

<table>
  <tr> 
     <td colspan="2">Group A</td> 
  </tr>
  <tr> 
     <td>HAJI </td> 
     <td><input class="one" id="2" type="checkbox" /></td> 
  </tr>
  <tr> 
     <td>SARA</td> 
     <td><input class="one" id="4" type="checkbox" /></td>
  </tr>
  <tr> 
     <td colspan="2">Group B</td> 
  </tr>
  <tr> 
     <td>LINA</td> 
     <td><input class="two" id="5" type="checkbox" /></td> 
  </tr>
  <tr> 
     <td>KUMAR</td> 
     <td><input class="two" id="7" type="checkbox" /></td> 
  </tr>

函数.js

var groupA=$(".one input[type='checkbox']");
 groupA.click(function()
 {
if (groupA.filter(":checked").length > 2)
    $(this).removeAttr("checked");
  });

 var groupB=$(".two input[type='checkbox']");
 groupB.click(function()
 {
if (groupB.filter(":checked").length > 4)
    $(this).removeAttr("checked");
  });

提前致谢。

Answer 1

我想我明白你的意思了，试试下面的 JS。

var groupA = $("input.one[type='checkbox']");
var groupB = $("input.two[type='checkbox']");

groupA.click(function(e) {
  if (groupA.filter(":checked").length > 2) {
    e.preventDefault();
  }
});

groupB.click(function(e) {
  if (groupB.filter(":checked").length > 4) {
    e.preventDefault();
  }
});

我通过阻止默认操作来阻止人们打勾。您还错误地选择了输入。您在“one”类中寻找“输入类型复选框”。

Answer 2

您可以使用数据属性来创建组。 像这样，您无需更新 HTML 即可创建更多组：

（我还将您的表格更新为更具可读性，但您构建 HTML 的方式不会影响 JS（只需同时使用 data-group 和 data-group-limit 属性。）

$(document).ready(function() {
  $("[data-group-limit]").each(function() {
    let group = $(this).data('group')
    let limit = $(this).data('group-limit')
    console.log("Init group " + group + " with limit of " + limit)

    $("[data-group="+group+"]:not([data-group-limit])").click(function(e) {
      if ($("[data-group="+group+"]:checked").length > limit) {
        console.log("Limit exceed for group " + group)
        e.preventDefault()
      }
    })
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr> 
     <td colspan="4" data-group="one" data-group-limit="2">Group A</td> 
  </tr>
  <tr> 
     <td>HAJI <input data-group="one" id="2" type="checkbox" /></td>
     <td>SARA<input data-group="one" id="3" type="checkbox" /></td>
     <td>HAJI <input data-group="one" id="4" type="checkbox" /></td> 
     <td>SARA<input data-group="tow" id="5" type="checkbox" /></td> 
  </tr>
</table>


<table>
  <tr> 
     <td colspan="6" data-group="two" data-group-limit="4">Group B</td> 
  </tr>
  <tr> 
     <td>HAJI <input data-group="two" id="6" type="checkbox" /></td>
     <td>SARA<input data-group="two" id="7" type="checkbox" /></td>
     <td>HAJI <input data-group="two" id="8" type="checkbox" /></td> 
     <td>SARA<input data-group="two" id="9" type="checkbox" /></td> 
     <td>SARA<input data-group="two" id="10" type="checkbox" /></td> 
     <td>SARA<input data-group="two" id="11" type="checkbox" /></td> 
  </tr>
</table>



<table>
  <tr> 
     <td colspan="2" data-group="three" data-group-limit="1">Group C</td> 
  </tr>
  <tr> 
     <td>HAJI <input data-group="three" id="12" type="checkbox" /></td>
     <td>SARA<input data-group="three" id="13" type="checkbox" /></td>
  </tr>
</table>

Answer 3

这是您的代码已修复且可运行。

首先，您的选择器坏了：input[type='checkbox'].one 是要走的路。

您的版本 (.one input[type='checkbox']) 选择标签内下面的所有输入，类为 one，但对于您的 DOM，输入具有类 one，因此您不能添加空格。

接下来，只需使用preventDefault() 防止事件产生影响；）

var groupA=$("input[type='checkbox'].one");
groupA.click(function(e) {
  if (groupA.filter(":checked").length > 2)
      e.preventDefault();
  }
);

var groupB=$("input[type='checkbox'].two ");
groupB.click(function(e) {
  if (groupB.filter(":checked").length > 4)
    e.preventDefault();
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr> 
     <td colspan="2">Group A</td> 
  </tr>
  <tr> 
     <td>HAJI </td> 
     <td><input class="one" id="2" type="checkbox" /></td> 
  </tr>
  <tr> 
     <td>SARA</td> 
     <td><input class="one" id="4" type="checkbox" /></td>
  </tr>
  <tr> 
     <td>DAVID</td> 
     <td><input class="one" id="3" type="checkbox" /></td>
  </tr>
  <tr> 
     <td colspan="2">Group B</td> 
  </tr>
  <tr> 
     <td>LINA</td> 
     <td><input class="two" id="5" type="checkbox" /></td> 
  </tr>
  <tr> 
     <td>KUMAR</td> 
     <td><input class="two" id="7" type="checkbox" /></td> 
  </tr>
</table>

我已在第一组中添加了一个条目，您可以选中它，您将无法选中两个以上的复选框。

Answer 4

似乎您可以通过将类的名称与您想要的组的选择限制对齐来简化您正在做的事情的可读性（如果您有多个具有相同选择限制的组，那么您应该应用class 到组的父元素，以便您可以指定要处理的组）。然后，您需要做的就是检查组中“选中”框的数量并使用event.preventDefault() 来防止用户检查超过限制。例如：

$('.two').click((event) => {
  if ($('.two:checked').length > 2) {
    event.preventDefault();
    alert('No more than 2 checkboxes can be selected');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="checkbox" class="two" id="apples" name="apples" value="apples">
<label for="apples">Apples</label>
<input type="checkbox" class="two" id="bananas" name="bananas" value="bananas">
<label for="bananas">Bananas</label>
<input type="checkbox" class="two" id="pears" name="pears" value="pears">
<label for="Pears">Pears</label>