encontre form -> check todas as caixas se value for igual ao que eu digo - jquery, forms, checkbox

Eu estou tentando fazer uma função simples para encontrar a forma circundante, depois encontre todas as caixas de seleção com um valor especificado e, em seguida, marque 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");
}

Mas absolutamente nada acontece. O que deu errado? :)

Respostas:

1 para resposta № 1

O problema é que você está usando this dentro checkAll sem uma inicialização correta. Quando checkAll() É executado, this será vinculado ao objeto global (window, nesse caso).

O clicado <a> elemento está disponível através this apenas para o código Javascript dentro do onclick atributo. Você tem que passar this para checkAll() como um parâmetro.

O código HTML deve ser alterado assim:

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

O 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 resposta № 2

Embora eu não pudesse ver algo necessariamente erradocom o seu código, tentar criar um jsFiddle com ele resultou em um erro de Javascript sobre a função checkAll não ser definida ao clicar na âncora - acho que esse pode ser um problema de escopo não relacionado devido à maneira como o jsFiddle executa o Javascript onLoad, mas eu " Não tenho 100% de certeza.

Optei por acabar com o onclick atributo do link, armazene o valor com o qual comparar em um atributo de dados customizado (data-value), vincule o manipulador de eventos click (com base em uma classe adicionada ao link) usando jQuery.

O novo HTML fica assim:

<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 então o código jQuery se parece com isso:

$(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 resposta № 3

tente assim:

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

---