find form -> проверете всички полета, ако стойността е равна на това, което казвам - jquery, forms, checkbox

Опитвам се да направя проста функция за намиране на заобикалящата форма, след което да намеря всички квадратчета с определена стойност и след това просто да проверим всички

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

Но абсолютно нищо не се случва. Какво се обърка? :)

Отговори:

1 за отговор № 1

Проблемът е, че използвате this вътре checkAll без правилна инициализация. Кога checkAll() се изпълнява, this ще бъде обвързан с глобален обект (window, в такъв случай).

Щракването <a> елемент е достъпен чрез this само за Javascript кода вътре в onclick атрибут. Трябва да минете this да се checkAll() като параметър.

HTML кодът трябва да бъде променен по следния начин:

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

Javascript кодът ще бъде:

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

---

1 за отговор № 2

Докато не можех да видя нещо погрешнос вашия код, опитвайки се да създадете jsFiddle с него доведе до Javascript грешка за checkAll функция не се дефинира при кликване върху котва - мисля, че това може да бъде несвързан обхват въпрос поради начина, по който jsFiddle изпълнява Javascript onLoad, но аз " m не е 100% сигурен.

Вместо да се откажа от това onclick атрибут на връзката, съхранява стойността, за да се сравни с в персонализиран атрибут за данни (data-value), след това свържете манипулатора на събития при натискане (въз основа на клас, добавен към връзката) с помощта на jQuery.

Новият HTML изглежда така:

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

След това кодът jQuery изглежда така:

$(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 за отговор № 3

опитайте по следния начин:

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

---