найти форму -> установить все флажки, если значение равно тому, что я говорю

Question

Я пытаюсь сделать простую функцию, чтобы найти окружающую форму, после этого найти все флажки с указанным значением, а затем просто проверить их все:)

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

Но абсолютно ничего не происходит.Что идет не так?:)

Answer 1

Несмотря на то, что я не мог видеть ничего обязательно неправильного в вашем коде, попытка создать jsFiddle с ним привела к ошибке Javascript о том, что функция checkAll не была определена при нажатии на якорь - я думаю, что это может быть не связанной с областью видимости проблемы из-за способа, которым jsFiddle выполняет Javascript onLoad, но я не уверен на 100%.

Вместо этого я решил отказаться от атрибута onclick ссылки, сохранить значение для сравнения в пользовательском атрибуте данных (data-value), а затем связать обработчик события click (на основе класса, добавленного к ссылка) с помощью 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');
    });
});

Answer 2

Проблема в том, что вы используете 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');
}

Answer 3

попробуй так:

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