Питання Налаштування "checked" для прапорці з jQuery?


Я хотів би зробити щось подібне до позначки checkbox використовуючи jQuery:

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

або

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

Чи існує така річ?


3606
2018-01-08 22:20


походження


Більш конкретне (і дуже корисне!) Питання: "Як я можу перевірити елемент у прапорці, встановленому за допомогою VALUE?", Я думаю, що ми також можемо обговорити тут, і я опублікував відповідь нижче. - Peter Krauss
Перевірте інші способи зробити це за допомогою jQuery тут stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
Якщо вам потрібна задіяна подія запуску, це є $("#mycheckbox").click(); - HumanInDisguise
"Перевірка чогось" пропонує перевірити його, тому я думаю, що "Перевірка прапорця" є більш чітким та кращим заголовком. - Alireza
prop (); функція є ідеальною відповіддю. Див. Визначення функції - api.jquery.com/prop - yogihosting


Відповіді:


jQuery 1.6+

Використовуйте новий .prop() спосіб:

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

jQuery 1.5.x і нижче

The .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с .checked майно:

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

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


5409
2018-01-08 22:25



@ Xian видалення позначеного атрибута не дозволяє відновити форму - mcgrailm
Як нагадуємо, jQuery 1.6.1 має вирішити проблему, про яку я згадав, тому ми можемо, звичайно, все ще повернутися до використання $ (...) prop (...) - cwharris
"Якщо ви працюєте з одним елементом, воно завжди буде найшвидшим для використання DOMElement.checked = true"Але це було б незначним, оскільки це лише один елемент ... - Tyler Crompton
Як говорить Тайлер, це незначне покращення продуктивності. Для мене, кодування з використанням спільного API робить його більш читабельним, ніж змішування рідного API та jQuery API. Я б дотримуватися jQuery. - Charlie Kilian
@TylerCrompton - Звичайно, це не зовсім про продуктивність, але робити $(element).prop('checked') це повна трата типізації. element.checked існує і має використовуватися у випадках, коли у вас вже є element - gnarf


Використання:

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

А якщо ви хочете перевірити, чи прапорець встановлено, чи ні:

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

624
2018-01-08 22:25



також перевіряється значення $ (selector) checked to check - eomeroff
Я спробував цей точний код, і це не спрацювало для мене у випадку вибору всіх / select none, прапорець, який потрібно перевірити, і знімати всі прапорці, а також перевірити їх стан. Замість цього я спробував відповісти @ Christopher Harris, і це зробило трюк. - JD Smith
Чому за допомогою "form #mycheckbox" замість просто "#mycheckbox"? Ідентифікатор вже є унікальним у всьому документі, він швидше і простіше його вибирати безпосередньо. - YuriAlbuquerque
@YuriAlbuquerque це був приклад. ви можете використовувати будь-який селектор, який ви хочете. - bchhun
$ (selector). checked не працює. У jQuery немає "перевіреного" методу. - Brendan Byrd


Це правильний спосіб перевірки та зняття прапорців з jQuery, оскільки це крос-платформенний стандарт, і воля дозволити форму репостів.

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

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

Виконавши це, ви використовуєте стандарти JavaScript для перевірки та зняття прапорців, тому будь-який веб-переглядач, який належним чином впроваджує властивість "checked" елемента, прапорець, буде виконувати цей код бездоганно. Це повинен Будь-який з основних браузерів, але я не можу перевірити попередню версію Internet Explorer 9.

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

Після того, як користувач натискає прапорець, цей флажок не відповідає на зміну атрибута "перевірені".

Ось приклад атрибута прапорця, який не виконує завдання після когось натиснув прапорець (це трапляється в Chrome).

Скрипка

Рішення:

Використовуючи властивість "перевіреного" 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;
});

284
2018-05-06 19:31



У вашому першому прикладі JSFiddle ви повинні використовувати removeAttr('checked') а не attr('checked', false) - Daniel X Moore
@DanielXMoore, Ви обговорюєте проблему. Приклад полягав у тому, щоб показати, що коли користувач натискає прапорець, браузер більше не відповідає на нього checkedатрибути змін незалежно методу, який використовується для їх зміни. - cwharris
@ ChristopherHarris Гаразд, ти правий, я пропустив це. Що ж до jQuery 1.6, то чи не слід використовувати метод .prop?$('.myCheckBox').prop('checked', true) Таким чином, він буде автоматично застосований до всього набору відповідних елементів (тільки при налаштуванні, отримання є ще лише першим) - Daniel X Moore
Так. prop це, безумовно, правильний спосіб встановлення атрибутів елемента. - cwharris
Красивий маленький плагін, дякую! Щоб зберегти цілісність, додати "повернути це" безпосередньо перед кінцем плагіна. - JD Smith


Ви можете зробити

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

або

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

Якщо у вас є спеціальний код у події onclick для прапорця, який ви хочете запустити, скористайтеся цим:

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

Ви можете зняти прапорець, видаливши атрибут цілком:

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

Ви можете перевірити всі такі прапорці:

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

130
2018-01-08 22:24



ви також можете перейти на $ ("# myTable input: checkbox"), кожен (...); - Chris Brandsma
Ви також можете піти $(".myCheckbox").click() - RobertPitt
@Michah, видалення позначеного атрибута не дозволяє відновити форму - mcgrailm
Ця відповідь застаріла, оскільки вона використовується .attr замість .prop. - Blazemonger
$("#mycheckbox").click(); працював для мене, як я слухав, щоб змінити подію теж і .attr & .prop не пожежою змінилася подія. - Damodar Bashyal


Ви також можете розширити об'єкт $ .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 (), якщо ви використовуєте іншу бібліотеку, яка використовує ці назви.


67
2017-08-20 18:19



@ livfree75 видалення позначеного атрибута не дозволяє відновити форму - mcgrailm
Ця відповідь застаріла, оскільки вона використовується .attr замість .prop. - Blazemonger


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

Останній запускає подію кліків для прапорця, інші не будуть. Тому якщо у вас є спеціальний код у події onclick для прапорця, який ви хочете запустити, скористайтеся останнім.


58
2018-01-08 22:36



верхній збій буде ... перевірений не є членом об'єкта jQuery - redsquare
Ця відповідь застаріла, оскільки вона використовується .attr замість .prop. - Blazemonger


Щоб встановити прапорець, слід використовувати

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

або

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

і зніміть прапорець, ви завжди повинні встановити його на ложь:

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

Якщо ти зробиш

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

він видаляє атрибут разом і тому ви не зможете скинути форму.

BAD DEMO jQuery 1.6. Я думаю, це зламане. За 1.6 я збираюся зробити нову публікацію з цього приводу.

НОВИЙ РОБОЧИЙ ДЕМО jQuery 1.5.2 працює в Chrome

Обидва демо використовуються

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

56
2018-03-23 15:22



Це неточно. встановивши атрибут "checked" на "will ні зніміть прапорці біля chrome. - cwharris
@xixonia я зробив тест, перш ніж опублікував вашу скрипку, не працює, тому що ви не змінили меню зліва, щоб включити jquery - mcgrailm
мcgralim - у 1.6 його ще простіше .... $(".mycheckbox").prop("checked", true/false) - gnarf
@MarkAmery ви згадали, що мій допис нічого не додавав під час публікації, але це точно. Якщо ви подивитеся на історію прийнятої відповіді, ви побачите, що вони пропонують видалити елемент. Через це неможливо скинути форму, тому я почав публікуватись. - mcgrailm
@mcgrailm Я пішов вперед і змінив прийняту відповідь у світлі ваших зауважень. Якщо ви хочете звернути увагу на це і перевірити, чи добре він виглядає в поточному стані, я б дуже вдячний. Я ще раз вибачаюся за пропозицію гострої критики, яка, принаймні частково, була дуже помилкова. - Mark Amery