Как «проверить» определенные флажки только с помощью 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 кодом I Выделить все или Удалить все галочки

$('#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.

Не могли бы вы помочь мне представить, как это можно достичь. Я могу изменить разметку, чтобы применить некоторые идентификаторы классов/selecter и т. Д., Если вы предложите, если это упростит ситуацию. И я понимаю, что эта функция предназначена для пользователей, имеющих браузеры с поддержкой 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); 
});