时间戳

首页 > 解决方案 > 如何使用javascript根据输入元素类限制多组复选框选择

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

问题描述

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

一级限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");
  });

提前致谢。

标签： javascriptjqueryhtml

解决方案

我想我明白你的意思，试试下面的 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”类中寻找“输入类型复选框”。

推荐阅读