如何仅使用Jquery“选中”某些复选框？

Question

我有一个包含复选框的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之间的复选框。

你能帮我讲讲如何做到这一点吗？如果你建议的话，我可以修改标记来应用一些类/选择器it等，如果这会让它更容易的话。据我所知，这项功能是为使用javascript浏览器的用户准备的。

谢谢。

Answer 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);
});

Answer 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));
    });
});

Answer 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);
});