Jqueryを使って特定のチェックボックスを "チェック"する方法は？

Question

私はこれは私がすべて選択するか、すべてのチェックボックス

$('#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; 
    }); 
}); 

の選択を解除します。しかし、私は、ユーザーができるようになる機能が必要なコードをJSで

<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 /> 

...の形式でチェックボックスを含むHTMLフォームを持っています5から20へのユーザ入力とは、アイコンをクリックした場合、特定のチェックボックスは、入力に応じて、選択されたと

<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。

これを達成する方法をいくつかお教えください。あなたが提案すれば、マークアップを変更していくつかのクラス/セレクタIDを適用して、それが簡単になるようにすることができます。 この機能は、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); 
});