Javascript 如何检查是否检查了特定的输入类型？

我的HTML模板中有两个复选框表单，其中一个允许多个选项，另一个只允许选择一个选项

我试图将第一个复选框表单限制为只允许两个复选框，但当前代码会影响两个复选框表单

我不能使用id或name，因为它们是由DB、id\u something 1、id\u something 2等生成的。 人们用什么方法来解决这个问题

当前JS

<script>
  $('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>

$（'input[type=checkbox]'）。关于（'change'，函数（e）{
如果（$（'input[type=checkbox]：选中'）。长度>2）{
$（this.prop（'checked'，false）；
}
});

我试图将表单限制为2个复选框

<li class="list-group-item">
 <div class="custom-control custom-checkbox">
  <label>Test</label></label><input type="checkbox" name="orange" id="id_orange" checked>
 </div>
</li>

<li class="list-group-item">
 <div class="custom-control custom-checkbox">
  <label>Test2</label><input type="checkbox" name="banana" id="id_banana" checked>
 </div>
</li>

试验


测试2

也受到影响的第二种形式

<ul id="id_someform">
 <li>
  <label for="id_someform_1"></label><input type="checkbox name="someForm" value=1" id="id_someform_1"
 </li>
 <li>
  <label for="id_someform_2"></label><input type="checkbox name="someForm" value=2" id="id_someform_2"
 </li>
</ul>

将内部选择器的范围限制为周围的窗体：

  $('input[type=checkbox]').change(function() {
    const form = $(this).closest('form');

    if ( form.find('input[type=checkbox]:checked').length > 2) ) {
      $(this).prop('checked', false);
    }
  });

注意，我已经使用jQuery的
change（）
方法简化了语法。

<script>
  $('input[type=checkbox]').on('change', function (e) {
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>

$（'input[type=checkbox]'）。关于（'change'，函数（e）{
如果（$（'input[type=checkbox]：选中'）。长度>2）{
$（this.prop（'checked'，false）；
}
});

上面的代码片段将侦听所有复选框事件，相反，在复选框上使用不同的id属性，并将选择器更改为使用您想要侦听事件的复选框的id，例如

<script>
  $('input#id_orange').on('change', function (e) {
    
    if ($('input[type=checkbox]:checked').length > 2)) {
      $(this).prop('checked', false);
    }
  });
</script>


$（'input#id_orange'）。在（'change'，函数（e）上{
如果（$（'input[type=checkbox]：选中'）。长度>2）{
$（this.prop（'checked'，false）；
}
});
如果表单不同，您可以尝试替换以下行：

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

与：

或：

或从一种形式到另一种形式不同的任何其他父元素

例如：

$('#form-id input[type=checkbox]').on('change', function (e) {
    if ( $('#form-id input[type=checkbox]:checked').length > 2 )  {
        $(this).prop('checked', false);
    }
});

我已经对它进行了测试，它对我有效。
标签是不同的还是相同的，包括两者？它们是不同的！：）这需要为每个输入使用一个函数，这并不理想。同意@isherwood，但感谢您的输入KarisSorry对JQuery不太熟悉，我应该使用.nexist（'form_id'）还是HTML中最接近的表单？如果它是最靠近的，因为我在页面底部有JS，所以它不能工作，而且这个问题在中间。不要在脚本中使用IDS，除非你必须这么做。它们不必要地限制了代码的可重用性。在这里，我正在寻找包装已更改的输入的表单元素。因为我在这个页面中使用了多个表单，所以不会有问题吗？很难说。你在问题中所说的“形式”不是形式。我真的不知道你的情况是什么样的。感谢你的输入，我用我的测试id替换了#表单id，但不起作用。你需要在脚本的第一行和第二行中替换
#表单id
。
$('form.class input[type=checkbox]').on('change', function (e) {

$('#form-id input[type=checkbox]').on('change', function (e) {
    if ( $('#form-id input[type=checkbox]:checked').length > 2 )  {
        $(this).prop('checked', false);
    }
});