Вопрос: Установка «checked» для флажка с jQuery?


Я хотел бы сделать что-то вроде этого, чтобы пометить checkboxс помощью JQuery :

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

или

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

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


3545


источник


Ответы:


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()вместо этого они будут работать на всех согласованных элементах.


5349



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

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

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

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

616



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

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

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

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

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

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

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

скрипка

Решение:

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

скрипка

Этот плагин изменит проверенное свойство любых элементов, выбранных 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;
});

282



You can do

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

or

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

If you have custom code in the onclick event for the checkbox that you want to fire, use this one instead:

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

You can uncheck by removing the attribute entirely:

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

You can check all checkboxes like this:

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

129



You can also extend the $.fn object with new methods:

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

Then you can just do:

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

Or you may want to give them more unique names like mycheck() and myuncheck() in case you use some other library that uses those names.


67



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

The last one will fire the click event for the checkbox, the others will not. So if you have custom code in the onclick event for the checkbox that you want to fire, use the last one.


58



To check a checkbox you should use

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

or

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

and to uncheck a check box you should always set it to false:

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

If you do

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

it removes the attribute all together and therefore you will not be able to reset the form.

BAD DEMO jQuery 1.6. I think this is broken. For 1.6 I am going to make a new post on that.

NEW WORKING DEMO jQuery 1.5.2 works in Chrome.

Both demos use

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

56



Assuming that the question is...

How do I check a checkbox-set BY VALUE?

Remember that in a typical checkbox set, all input tags have the same name, they differ by the attribute value: there are no ID for each input of the set.

Xian's answer can be extended with a more specific selector, using the following line of code:

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

43