如何仅使用 Jquery“检查”某些复选框？答案

【问题标题】：How to "check" certain checkboxes only using Jquery?如何仅使用 Jquery“检查”某些复选框？
【发布时间】：2009-07-03 14:04:24
【问题描述】：

我有一个 HTML 表单，其中包含 .. 形式的复选框

<input type="checkbox" name="range[]" class="range_opts" id="range-1" value="1" /> 1 <br />
<input type="checkbox" name="range[]" class="range_opts" id="range-2" value="2" /> 2 <br />
<input type="checkbox" name="range[]" class="range_opts" id="range-3" value="3" /> 3 <br />
        ...
        ...
<input type="checkbox" name="range[]" class="range_opts" id="range-28" value="28" /> 28<br />
<input type="checkbox" name="range[]" class="range_opts" id="range-29" value="29" /> 29<br />
<input type="checkbox" name="range[]" class="range_opts" id="range-30" value="30" /> 30<br />

使用此 JS 代码，我选择全部或取消选择所有复选框

$('#select_all_ranges').click(function() {
    $('input[name="range[]"]').each(function() {
        this.checked = true;
    });
});
$('#deselect_all_ranges').click(function() {
    $('input[name="range[]"]').each(function() {
        this.checked = false;
    });
});

但我需要用户能够选择某些复选框的功能，具体取决于输入

    <input type="text" name="from_range" id="frm_range" />
   <input type="text" name="to_range" id="to_range" />
    <img src="icon.png" id="range123" />

因此，如果用户输入 5 到 20 并单击图标，它会检查 5-20 的复选框。

您能否帮我一些想法如何实现这一点。如果您建议，我可以更改标记以应用一些类/选择器 ID 等，如果它会使它更容易。而且我了解此功能适用于拥有启用 javascript 的浏览器的用户。

谢谢。

【问题讨论】：

请注意：您不必遍历所有复选框来检查代码中的每个复选框。这将是一个更快的等价物： $('input.range_opts').attr('checked', true);

标签： jquery html checkbox

【解决方案1】：

$("#range123").click(function() {
  var from = $("#frm_range").val();
  var to = $("#to_range").val();
  var expr = ":checkbox.range_opts:lt(" + to + ")";
  if (from > 1) {
    expr += ":gt(" + (from-1) + ")";
  }
  $(expr).attr("checked", true);
});

【讨论】：

@cletus .. 你能帮我知道这些 gt 和 lt 是如何工作的吗？我的意思是他们会比较“元素ID”值吗？谢谢
docs.jquery.com/Selectors/gt#index :gt() 和 :lt() 处理集合中的索引并从 0 开始。假设 $("blah") 返回 10 个项目。 $("blah:gt(7)") 将返回第 9 和第 10 项（7 on 0 索引是第 8 项）。
啊，我明白了。凉爽的。谢谢你的帮助。

【解决方案2】：

怎么样：

$('#range123').click(function() {
    var bottom = $("#frm_range").value;
    var top = $("#to_range").value;
    $('input[name="range[]"]').each(function() {
            this.checked = ((this.value > bottom) && (this.value < top));
    });
});

【讨论】：

是的，我刚刚完成了几乎相同的写作。无论如何，谢谢。

【解决方案3】：

是的，您可以在选中复选框时简单地检查index：

$('#select_all_ranges').click(function() {
    var from = $('#frm_range').val();
    var to = $('#to_range').val();
    var expr = '.range_opts:gt(' + (from-2) + '):lt(' + (to-1) + ')';
    $(expr).attr("checked", true);
});

【讨论】：