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>

function.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();
  }
});

通过阻止默认操作，我已经阻止人们进行滴答。您还错误地选择了输入。您在类“一个”中寻找“输入类型复选框”。

Answer 2

这是您的固定且可运行的代码。

首先，您的选择器已损坏：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 3

您可以使用data属性创建组。这样，您无需更新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 4

似乎您可以通过将类的名称与想要的组的选择限制对齐来简化操作的可读性（如果您有多个具有相同选择限制的组，那么您应该应用类到组的父元素，因此您可以指定要处理的组）。然后，您要做的就是检查组中“已选中”框的数量，并使用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>

如何使用javascript

4 个答案: