trova modulo -> seleziona tutte le caselle se il valore è uguale a quello che dico - jquery, moduli, casella di controllo

Sto cercando di fare una semplice funzione per trovare la forma circostante, successivamente trovare tutte le caselle con un valore specificato e poi basta controllare tutte :)

html

<form action="bla bla bla">
<a href="javascript:void(0);" onclick="checkAll(2);">Check all 2s</a>

<input type="checkbox" value="1" /> 1
<input type="checkbox" value="1" /> 1
<input type="checkbox" value="2" /> 2
<input type="checkbox" value="2" /> 2
<input type="checkbox" value="3" /> 3
<input type="checkbox" value="4" /> 3
</form>

js

function checkAll(i) {
var checkboxes = $(this).closest("form").find("input[type=checkbox][value="+i+"]");
checkboxes.attr("checked", "checked");
}

Ma assolutamente non succede niente. Cosa va storto? :)

risposte:

1 per risposta № 1

Il problema è che stai usando this dentro checkAll senza un'inizializzazione corretta. quando checkAll() è eseguito, this sarà legato all'oggetto globale (window, in questo caso).

Il cliché <a> elemento è disponibile attraverso this solo al codice Javascript all'interno del onclick attributo. Devi passare this a checkAll() come parametro

Il codice HTML deve essere cambiato in questo modo:

<a href="javascript:void(0);" onclick="checkAll(this, 2);">Check all 2s</a>

Il codice Javascript sarà:

function checkAll(el, i) {
var checkboxes = $(el).closest("form").find("input[type=checkbox][value=" + i + "]");
checkboxes.attr("checked", "checked");
}

---

1 per risposta № 2

Mentre io non potevo vedere qualcosa di necessariamente sbagliatocon il tuo codice, provando a creare un jsFiddle con esso si è verificato un errore Javascript relativo alla funzione checkAll non definita quando si fa clic sull'ancora - penso che questo possa essere un problema di ambito non correlato a causa del modo in cui jsFiddle esegue Javascript onLoad, ma io " non sicuro al 100%.

Ho optato invece per eliminare il onclick attributo del collegamento, memorizzare il valore da confrontare in un attributo dati personalizzato (data-value), quindi associare il gestore di eventi click (basato su una classe aggiunta al collegamento) utilizzando jQuery.

Il nuovo codice HTML si presenta così:

<form action="bla bla bla">
<a href="#" class="checkall" data-value="2">Check all 2s</a>

<input type="checkbox" value="1" /> 1
<input type="checkbox" value="1" /> 1
<input type="checkbox" value="2" /> 2
<input type="checkbox" value="2" /> 2
<input type="checkbox" value="3" /> 3
<input type="checkbox" value="4" /> 3
</form>

E poi il codice jQuery assomiglia a questo:

$(function() {
$("a.checkall").click(function(e) {
e.preventDefault();
var $this = $(this);
var checkboxes = $this.closest("form").find("input:checkbox[value=""+$this.data("value")+""]");
checkboxes.attr("checked", "checked");
});
});

---

0 per risposta № 3

prova in questo modo:

function checkAll(i, ref) {
$(ref).siblings("input[type=checkbox][value="" + i + ""]").attr("checked", "checked");
}
$("form :checkbox").click(function() {
checkAll($(this).prop("value"), this)
});

---