знайти форму -> перевірити всі поля, якщо значення дорівнює тому, що я кажу - 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, але я " м не на 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)
});

---