时间戳

首页 > 解决方案 > 使用jquery从第一次单击到第二次单击检查多个复选框

javascript - 使用jquery从第一次单击到第二次单击检查多个复选框

问题描述

对不起我的英语不好。我有几个这样的复选框：

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

如果我选中第二个复选框和第七个复选框，是否可以使用 JQUERY 自动检查第二个和第七个复选框？

<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" checked />2
<input type="checkbox" name="data[]" value="3" checked />3
<input type="checkbox" name="data[]" value="4" checked />4
<input type="checkbox" name="data[]" value="5" checked />5
<input type="checkbox" name="data[]" value="6" checked />6
<input type="checkbox" name="data[]" value="7" checked />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

谢谢！

标签： javascriptphpjquerycheckbox

解决方案

您可以在 then 之间使用pseudo选择器first和last循环

$('[type="checkbox"]:checkbox').change(function() {
  var first = $('[type="checkbox"]:checked:first').val();
  var last = $('[type="checkbox"]:checked:last').val();
  for(var i = first; i <= last; i++){
    $('[type="checkbox"][value="'+i+'"]').prop( "checked", true );
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="data[]" value="1" />1
<input type="checkbox" name="data[]" value="2" />2
<input type="checkbox" name="data[]" value="3" />3
<input type="checkbox" name="data[]" value="4" />4
<input type="checkbox" name="data[]" value="5" />5
<input type="checkbox" name="data[]" value="6" />6
<input type="checkbox" name="data[]" value="7" />7
<input type="checkbox" name="data[]" value="8" />8
<input type="checkbox" name="data[]" value="9" />9
<input type="checkbox" name="data[]" value="10" />10

推荐阅读