Javascript 如何在使用jquery时选中0到n个索引复选框

我有一些复选框，我想用按钮来勾选和取消勾选

例如，假设我想选中复选框0到9，然后我单击“10或更少”按钮，这样其他复选框必须取消选中，并且只选中索引小于10的复选框

按钮

<button class="1-10">10 or less</button>
<button class="1-25">25 or less</button>
<button class="1-50">50 or less</button>

10或更少
25岁或以下
50或以下

复选框

<input type="checkbox" name="age[]" class="age_opts" value="1" /> 1 <br />
<input type="checkbox" name="age[]" class="age_opts" value="2" /> 2 <br />
<input type="checkbox" name="age[]" class="age_opts" value="3" /> 3 <br />
          ...
          ...
<input type="checkbox" name="age[]" class="age_opts" value="49" /> 49<br />
<input type="checkbox" name="age[]" class="age_opts" value="50" /> 50<br />

1

2

3

...
...
49

50

我已经使用了这个循环，但可能有任何更好的方法，请让我知道

---

提前感谢

您可以筛选相关元素并设置其选中属性：

$（函数（）{
$（'.1-10'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<10.prop（'checked'，true）；
});
$（'.1-25'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<25.prop（'checked'，true）；
});
$（'.1-50'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<50.prop（'checked'，true）；
});
});

10或以下
25岁或以下
50或以下


1

2

3

4

5

6

7

8

9

10

…

49

50
您可以筛选相关元素并设置其选中属性：


$（函数（）{
$（'.1-10'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<10.prop（'checked'，true）；
});
$（'.1-25'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<25.prop（'checked'，true）；
});
$（'.1-50'）。单击（函数（）{
$（'age_opts'）.prop（'checked'，false）；
$（'.age_opts'）.filter（（i）=>i<50.prop（'checked'，true）；
});
});

10或以下
25岁或以下
50或以下


1

2

3

4

5

6

7

8

9

10

…

49

50
您需要使用
.slice（n，n+1）
来分割所需的复选框。请看以下与您的问题有很多相似之处的问题：

您需要使用
.slice（n，n+1）
来切掉所需的复选框。请看以下与您的问题有很多相似之处的问题：

使用函数筛选出如下复选框索引（假设
n
th复选框具有问题中的值
n
）：

$（'input[type=checkbox]'）。过滤器（函数（）{
返回$（this）.val（）>=min&&$（this）.val（）=min&&$（this）.val（）使用函数筛选出如下复选框索引（假设
n
th复选框的值与问题中的值
n
）：

$（'input[type=checkbox]'）。过滤器（函数（）{
返回$（this）.val（）>=min&&$（this）.val（）=min&&$（this）.val（）的可能重复项
$('input[type=checkbox]').filter(function() {
  return $(this).val() >= min && $(this).val() <= max;
}).prop('checked', true);