Jquery 如何查找表单中选中的下一个复选框

我试图做一些对你们中的一些人来说可能很容易的事情，但我花了几个小时去做

我有一个带有复选框的表单，如下所示

<form class="form-style" id="st-21">
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="1" data-family="2" name="b1" style="margin-right:10px" checked="checked">
      Température bas(C)
    </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="4" data-family="2" name="b4" style="margin-right:10px" checked="checked">
      Température haut(C)
   </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="5" data-sensor="21" data-family="4" name="ba" style="margin-right:10px" checked="checked">
      Batterie(V)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="6" data-sensor="18" data-family="5" name="an" style="margin-right:10px">
      Vitesse du vent(km/h)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="7" data-sensor="19" data-family="5" name="wd" style="margin-right:10px">
      Direction du vent(Degré)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="8" data-sensor="20" data-family="6" name="wd" style="margin-right:10px">
      Radiation solaire (W/m2)
  </label>
</form>

$(".form-style").on('change',function() {
        var sList=[];
        var i = 0;
        $(this).find('input:checkbox').each(function () {
          if($(this).is(':checked'))
          {
             if(sList.length > 1){ 
                // HOW CAN I REMOVE THE NEXT CHECKED CHECKBOX
             }
            sList[i] = parseInt($(this).data("type"));
          }
        });
});

如果查看我表单中的所有复选框，并在sList数组中添加索引，当它发现复选框已选中时

如果我选中了一个新的复选框，问题1：是否有方法检测选中了哪个复选框

它查看复选框，当我选中一个新复选框时，我添加了以下内容

<form class="form-style" id="st-21">
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="1" data-family="2" name="b1" style="margin-right:10px" checked="checked">
      Température bas(C)
    </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="2" data-sensor="4" data-family="2" name="b4" style="margin-right:10px" checked="checked">
      Température haut(C)
   </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="5" data-sensor="21" data-family="4" name="ba" style="margin-right:10px" checked="checked">
      Batterie(V)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="6" data-sensor="18" data-family="5" name="an" style="margin-right:10px">
      Vitesse du vent(km/h)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="7" data-sensor="19" data-family="5" name="wd" style="margin-right:10px">
      Direction du vent(Degré)
  </label>
  <label style="margin-right:10px">
    <input type="checkbox" data-type="8" data-sensor="20" data-family="6" name="wd" style="margin-right:10px">
      Radiation solaire (W/m2)
  </label>
</form>

$(".form-style").on('change',function() {
        var sList=[];
        var i = 0;
        $(this).find('input:checkbox').each(function () {
          if($(this).is(':checked'))
          {
             if(sList.length > 1){ 
                // HOW CAN I REMOVE THE NEXT CHECKED CHECKBOX
             }
            sList[i] = parseInt($(this).data("type"));
          }
        });
});

但是从这一点上，我需要删除已选中的下一个复选框。为了始终有两个检查

可以帮助我找到下一个复选框，或告诉我如何使它成为重要的

非常感谢

您可以使用带有伪选择器的.filter:gt1来选择复选框3及以上，并按如下方式取消选中它们：

const $checks = $('form :checkbox');
$checks.on('change', function() {
    //get all checkboxs
    $checks
    //get checked out of those
    .filter(':checked')
    //exclude current checkbox
    .not(this)
    //get second and on
    .filter(':gt(0)')
    //uncheck them
    .prop('checked', false);
})
//trigger change on load in order to execute above code
.change();

演示

const$checks=$'form:checkbox'； $checks.on'change'，函数{ //拿到所有支票箱 美元支票 //检查一下 .filter'：已选中' //排除当前复选框 .不是这个 //继续前进 .filter'：gt0' //取消选中它们 .prop'checked'，false； } //加载时触发更改以执行上述代码 改变 巴斯克温度 高级温度 巴特耶夫 维特斯杜文特公里/小时 文特德格方向 辐射日光浴，W/m2

---

这可能是一个解决方案，但是取消选中复选框可能会很奇怪

const allCheckboxes=$。表单样式输入：复选框； 所有复选框.eachi，cb=>{ $cb.changefunction{ constThisCheckboxName=$this.propname； 所选常量=[…所有复选框].filterbox=>$box.propchecked； 如果选择了。长度>2{ const notThisCheckbox=selected.filterbox=>$box.propname！==thisCheckboxName； $notThisCheckbox[notThisCheckbox.length-1].propchecked，false； } }; };

---

看起来不错，多谢了，汉克斯。它看起来像第三个和第二个复选框，如果已经选中第一个和第二个复选框，则无法选中。为了使其余复选框可单击，我们必须从计数中排除刚刚选中的复选框，现在从2开始计数。代码更新了，演示也更新了。