У меня есть 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.

Не могли бы вы помочь мне некоторыми идеями, как этого можно достичь. Я могу изменить разметку, чтобы применить некоторые классы / идентификаторы селекторов и т. Д., Если вы предложите, если это упростит задачу. И я понимаю, что эта функция предназначена для пользователей браузеров с поддержкой JavaScript.

Спасибо.

3
TigerTiger 3 Июл 2009 в 18:04
Небольшое примечание: вам не нужно перебирать все флажки, чтобы проверить каждый из них в вашем коде. Это был бы более быстрый эквивалент: $ ('input.range_opts'). Attr ('checked', true);
 – 
Paolo Bergantino
3 Июл 2009 в 18:36

3 ответа

Лучший ответ
$("#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);
});
3
cletus 3 Июл 2009 в 18:15
.. не могли бы вы помочь мне узнать, как эти gt и lt работают? Я имею в виду, сравнивают ли они значение «id элемента»? Спасибо
 – 
TigerTiger
3 Июл 2009 в 19:29
Ах я вижу. Прохладный. Спасибо за помощь.
 – 
TigerTiger
3 Июл 2009 в 20:02

Как насчет:

$('#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));
    });
});
1
Stobor 3 Июл 2009 в 18:11
Да, я только что закончил писать почти то же самое. Спасибо, в любом случае.
 – 
TigerTiger
3 Июл 2009 в 18:16

Да, вы можете просто проверить индекс, установив флажки:

$('#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);
});
0
Tim Büthe 3 Июл 2009 в 18:31