Comment "cocher" certaines cases uniquement en utilisant Jquery?

Question

J'ai un formulaire HTML contenant des cases à cocher sous forme de ..

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

Avec ce JS Code I Sélectionner tout ou désélectionner toutes les cases

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

Mais je besoin de la fonctionnalité où serait en mesure utilisateur avoir certaines cases sélectionnées, en fonction de l'entrée

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

donc si des entrées d'utilisateur à partir de 5 à 20 et clique sur l'icône, il vérifie à partir des cases à cocher 5-20.

Pouvez-vous m'aider s'il vous plaît quelques idées comment ceci peut être réalisé. Je peux modifier le balisage pour appliquer certaines classes/sélecteurs, etc. Si vous le suggérez, cela faciliterait la tâche. Et je comprends que cette fonctionnalité est pour les utilisateurs ayant des navigateurs compatibles avec javascript.

Merci.

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

Que diriez-vous:

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

Oui, vous pouvez simplement vérifier la index tout en sélectionnant les cases à cocher:

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