Cum de a „verifica“ anumite casete de selectare folosind doar Jquery?

Question

Cum de a „verifica“ anumite casete de selectare folosind doar Jquery?

voturi

3

Am un formular HTML care conține casetele de selectare în formă 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 />

Cu acest cod JS I Selectați toate sau Deselecteaza toate casetele de selectare

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

Dar am nevoie de funcționalitatea unde utilizatorul ar putea avea anumite casete de selectare selectate, în funcție de intrare

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

așa că, dacă intrările de utilizator de la 5 la 20 și face clic pe pictograma verifică casetele 5-20.

Pot să vă rog să-mi ajute cateva idei despre cum acest lucru poate fi realizat. Pot modifica markup pentru a aplica unele clase / selecter ID-uri etc, dacă vă sugerăm, dacă ar face mai ușor. Și am înțeles că această opțiune este pentru utilizatorii care au browsere JavaScript activat.

Mulțumiri.

jquery html checkbox

Întrebat 03/07/2009 la 15:04
sursa de către utilizator TigerTiger

În alte limbi...

3 răspunsuri

voturi

1

Ce zici de:

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

Publicat 03/07/2009 la 15:11
sursa de către utilizator Stobor

voturi

0

Da, puteți pur și simplu verifica indexul în timp ce selectați casetele de selectare:

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

Publicat 03/07/2009 la 15:16
sursa de către utilizator Tim Büthe

cletus · Accepted Answer · 2009-07-03 15:15

voturi

3

Autorul întrebării a acceptat acest răspuns ca fiind cel mai bun.

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

Publicat 03/07/2009 la 15:15
sursa de către utilizator cletus