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

【问题标题】：check multiple checkbox from first click to second click using jquery使用jquery从第一次单击到第二次单击检查多个复选框
【发布时间】：2019-10-30 11:54:31
【问题描述】：

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

<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

谢谢！

【问题讨论】：

是的，这是可能的，但你的尝试在哪里？
是的，可以给 2 到 7 位简单的类名提供相同的类名
stackoverflow.com/questions/3197702/…已经有答案了
使用 jQuery 是可能的，但是当您需要一次又一次地修改代码时，最好编写一个逻辑而不是同一个类。我认为您需要根据某些逻辑正确执行检查

标签： javascript php jquery checkbox

【解决方案1】：

您可以使用 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

【讨论】：

考虑在选择器 $('[value="'+i+'"]') 中选择复选框。
在循环时不必选择first 和last，更好的是i = first + 1; i < last

【解决方案2】：

我是这样实现的：

var checked = [];
$(":checkbox").click(function() {
    if (!$(this).is(':checked')) {
       // Optional sanity
       // if you wish to make user available to uncheck 
       return;
    }
    var min = $(':checkbox:checked:first').val();
    var max = $(':checkbox:checked:last').val();
    for (var index = Number(min)+1; index < Number(max); index++) {
      $(`[type="checkbox"][value='${index}']`).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

【讨论】：

【解决方案3】：

完全可能。你可以这样做（它需要你在输入中添加一个 id。我将使用myCheck）：

let first = null;

function clicked(event) {
    if(first) {
        let second = parseInt(event.target.value, 10);

        let a = first < second ? first : second;
        let b = first < second ? second : first;

        for(let i = a; i <= b; i++) {
            $('#myCheck[value="' + i + '"]').attr('checked', true);
        }

        first = null;
    }
    else {
        first = parseInt(event.target.value, 10);
    }
}

然后，只需在您的 click 事件中使用 clicked。看看吧：https://jsfiddle.net/7pf45mbz/1/

在某些情况下，您可能必须使用prop 而不是attr。但是，对于您的用例，如果您使用带有multiple 的select 元素而不是复选框，那么用户体验可能会更好。

【讨论】：