Установка "проверил" для флажка с JQuery?

Question

Я бы хотел сделать что-то подобное, чтобы отметить checkbox, используя jQuery :

$(".myCheckBox").checked(true);

или

$(".myCheckBox").selected(true);

Существует ли такая вещь?

Answer 1

JQuery 1.6 +

Используйте новый метод .prop():

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x и ниже

Метод .prop() недоступен, поэтому вам необходимо использовать .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Обратите внимание, что это подход, использовавшийся в модульных тестах jQuery до версии 1.6 , и предпочтительнее использования

$('.myCheckbox').removeAttr('checked');

так как последний будет, если флажок был изначально установлен, изменить поведение вызова на .reset() в любой форме, которая его содержит - незначительное, но, вероятно, нежелательное изменение поведения.

Для большего контекста некоторые неполные обсуждения изменений в обработке атрибута / свойства checked при переходе с 1.5.x на 1.6 можно найти в примечаниях к выпуску версии 1.6 и Атрибуты и свойства раздел .prop() документации .

Любая версия jQuery

Если вы работаете только с одним элементом, вы всегда можете просто изменить свойство HTMLInputElement s .checked:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

Преимущество использования методов .prop() и .attr() вместо этого заключается в том, что они будут работать со всеми соответствующими элементами.

Answer 2

Использование:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

А если вы хотите проверить, установлен ли флажок или нет:

$('.myCheckbox').is(':checked');

Answer 3

Это правильный способ проверки и снятия флажков с помощью jQuery, так как это кросс-платформенный стандарт, и будет разрешать перепосты формы.

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

Делая это, вы используете стандарты JavaScript для установки и снятия флажков, поэтому любой браузер, который правильно реализует свойство «checked» элемента checkbox, будет без проблем выполнять этот код. Это должно быть всеми основными браузерами, но я не могу протестировать его до Internet Explorer 9.

Проблема (jQuery 1.6):

Как только пользователь нажимает на флажок, этот флажок перестает отвечать на изменения атрибута «флажок».

Вот пример того, как атрибут checkbox не может выполнить работу после того, как кто-то щелкнул флажок (это происходит в Chrome).

Fiddle

Решение:

Используя JavaScript-свойство «checked» для элементов DOM , мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM, выполняя то, что мы хотим сделать делаем.

Fiddle

Этот плагин будет изменять свойство selected любых элементов, выбранных jQuery, и успешно устанавливать и снимать флажки при любых обстоятельствах. Поэтому, хотя это может показаться чрезмерным решением, оно улучшит работу вашего сайта и предотвратит недовольство пользователей.

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            // Set the value of the checkbox
            $(this).each(function(){ this.checked = value; });
        } 
        else if(value === undefined || value === 'toggle') {
            // Toggle the checkbox
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

В качестве альтернативы, если вы не хотите использовать плагин, вы можете использовать следующие фрагменты кода:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

Answer 4

Вы можете сделать

$('.myCheckbox').attr('checked',true) //Standards compliant

или

$("form #mycheckbox").attr('checked', true)

Если в событии onclick есть пользовательский код для флажка, который вы хотите снять, используйте этот вместо:

$("#mycheckbox").click();

Вы можете снять галочку, полностью удалив атрибут:

$('.myCheckbox').removeAttr('checked')

Вы можете установить все флажки следующим образом:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

Answer 5

Вы также можете расширить объект $ .fn новыми методами:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

Тогда вы можете просто сделать:

$(":checkbox").check();
$(":checkbox").uncheck();

Или, возможно, вы захотите дать им более уникальные имена, такие как mycheck () и myuncheck (), если вы используете какую-то другую библиотеку, которая использует эти имена.

Answer 6

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

Последний вызовет событие click для флажка, остальные - нет. Поэтому, если у вас есть специальный код в событии onclick для флажка, который вы хотите включить, используйте последний.

Answer 7

Чтобы установить флажок, вы должны использовать

 $('.myCheckbox').attr('checked',true);

или

 $('.myCheckbox').attr('checked','checked');

и чтобы снять флажок, вы всегда должны устанавливать его в false:

 $('.myCheckbox').attr('checked',false);

Если вы делаете

  $('.myCheckbox').removeAttr('checked')

удаляет атрибут все вместе, и поэтому вы не сможете сбросить форму.

ПЛОХАЯ ДЕМО jQuery 1.6 . Я думаю, что это сломано. Для 1.6 я собираюсь сделать новый пост об этом.

NEW WORKING DEMO jQuery 1.5.2 работает в Chrome.

Обе демонстрации используют

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

Answer 8

Выбирает элементы, которые имеют указанный атрибут со значением, содержащим данную подстроку "ckbItem":

$('input[name *= ckbItem]').prop('checked', true);

Он выберет все элементы, которые содержат ckbItem в своем атрибуте имени.

Answer 9

Предполагая, что вопрос ...

Как проверить, установлен ли флажок ПО ЗНАЧЕНИЮ?

Помните, что в типичном наборе флажков все теги ввода имеют одинаковое имя, они отличаются атрибутом value: для каждого входа набора нет идентификатора.

Ответ Сианя можно расширить с помощью более конкретного селектора , используя следующую строку кода:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

Answer 10

Мне не хватает решения. Я всегда буду использовать:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}