encontrar formulario -> marcar todos los cuadros si el valor es igual a lo que digo - jquery, formularios, casilla de verificación

Estoy tratando de hacer una función simple para encontrar la forma circundante, luego encontrar todas las casillas de verificación con un valor específico y luego simplemente marcarlas todas :)

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

Pero no pasa absolutamente nada. ¿Qué va mal? :)

Respuestas

1 para la respuesta № 1

El problema es que estas usando this dentro checkAll sin una inicialización correcta. Cuando checkAll() es ejecutado, this estará vinculado a un objeto global (window, en este caso).

El clic <a> elemento está disponible a través de this sólo para el código Javascript dentro de la onclick atributo. Tienes que pasar this a checkAll() como un parámetro.

El código HTML tiene que ser cambiado así:

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

El código Javascript será:

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

---

1 para la respuesta № 2

Si bien no pude ver nada necesariamente malcon su código, al intentar crear un jsFiddle con él, se produjo un error de Javascript sobre la función checkAll que no se define al hacer clic en el ancla. Creo que esto puede ser un problema de alcance no relacionado debido a la forma en que jsFiddle ejecuta Javascript onLoad, pero " No estoy 100% seguro.

Opté en lugar de acabar con el onclick atributo del enlace, almacene el valor para comparar en un atributo de datos personalizado (data-value), luego enlace el controlador de eventos de clic (basado en una clase agregada al enlace) usando jQuery.

Nuevo HTML se ve así:

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

Y luego el código jQuery se ve así:

$(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 para la respuesta № 3

prueba de esta manera:

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

---