Установка "Позначено" для прапорця з jQuery


4128

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

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

або

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

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


Більш конкретне (і дуже корисне!) Запитання "Як перевірити елемент у встановленому прапорець ВИМОГА?", Я думаю, що ми також можемо обговорити тут, і я опублікував відповідь нижче.
— Пітер Краус

Перевірте інші способи зробити це з допомогою JQuery тут stackoverflow.com/a/22019103/1868660
— Subodh Ghulaxe

Якщо вам потрібна подія $("#mycheckbox").click();
— onchange,

"Перевірка чогось" передбачає тестування цього, тому я думаю, що "Перевірка прапорець" є більш чітким і кращим заголовком.
— Аліреза

опора (); функція - ідеальна відповідь. Дивіться визначення функції - api.jquery.com/prop
— yogihosting

Відповіді:


5969

Сучасний jQuery

Використання .prop():

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

DOM API

Якщо ви працюєте лише з одним елементом, ви завжди можете просто отримати доступ до базових даних HTMLInputElementі змінити його .checkedвластивості:

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

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

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()документації .


26
@Xian видалення перевіреного атрибуту унеможливлює скидання форми
— mcgrailm

6
Як зауваження, jQuery 1.6.1 має вирішити проблему, про яку я згадував, тому ми можемо технічно все-таки повернутися до використання $ (...).
— Prop

19
"Якщо ви працюєте лише з одним елементом, це завжди буде найшвидшим у використанні DOMElement.checked = true". Але це було б незначно, адже це лише один елемент ...
— Тайлер Кромптон

46
За словами Тайлера, це незначне поліпшення продуктивності. Для мене кодування за допомогою загального API робить його більш читабельним, ніж змішування власних API та jQuery. Я б дотримувався jQuery.
— Чарлі Кіліан

18
@TylerCrompton - Звичайно, це не зовсім щодо продуктивності, але робити $(element).prop('checked')це є повною тратою набору тексту. element.checkedіснує і має використовуватися у випадках, коли у вас вже єelement
— gnarf

704

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

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

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

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

4
також $ (селектор) .визначено, щоб перевірити, перевірено
— eomeroff

6
Я спробував цей точний код, і він не працював для мене у випадку, якщо встановити прапорець "Все / встановити жоден", який повинен перевірити та зняти прапорець, а також перевірити їх стан. Натомість я спробував відповідь @Christopher Harris і це зробив трюк.
— JD Smith

Навіщо використовувати "form #mycheckbox" замість просто "#mycheckbox"? Ідентифікатор вже унікальний у всьому документі, його швидше та простіше вибрати безпосередньо.
— ЮрійАльбукерке

@YuriAlbuquerque це був приклад. Ви можете використовувати будь-який селектор.
— bchhun

5
$ (селектор) .визначений не працює. У jQuery немає "перевіреного" методу.
— Брендан Берд

318

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

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

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

Роблячи це, ви використовуєте стандарти JavaScript для перевірки та зняття прапорців, тому будь-який браузер, який належним чином реалізує властивість "прапорець" елемента прапорця, бездоганно запустить цей код. Це повинні бути всі основні браузери, але я не в змозі перевірити попередній 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;
});

5
У своєму першому прикладі JSFiddle вам слід скористатись, removeAttr('checked')а неattr('checked', false)
— Даніель Х Мур

4
@DanielXMoore, ти обіймаєш проблему. Приклад полягав у тому, що після того, як користувач натиснув прапорець, браузер більше не відповідає на checkedзміни атрибутів, незалежно від методу їх зміни.
— cwharris

3
@ChristopherHarris Добре, ти маєш рацію, я це пропустив. Чи не ви користуєтесь jQuery 1.6, використовуючи метод .prop? $('.myCheckBox').prop('checked', true)Таким чином він автоматично застосовуватиметься до всього набору відповідних елементів (лише при встановленні, отримання все ще лише першим)
— Даніель X Мур

Так. propце, безумовно, відповідний спосіб встановлення атрибутів на елементі.
— cwharris

@ChristopherHarris, я додав те, що мені потрібно для плагіна, щоб дозволити деяку гнучкість параметрів. Це спростило вбудовану обробку без перетворення типів. Окрім розрізнених баз даних з "ідеями" про те, що таке "правда". Fiddle
— Джо Джонстон

147

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

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

або

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

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

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

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

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

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

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

Ви також можете перейти до $ ("# myTable input: checkbox"). кожен (...);
— Кріс Брандсма

Також можна поїхати$(".myCheckbox").click()
— RobertPitt

3
@Michah видалення перевіреного атрибуту унеможливлює скидання форми
— mcgrailm

12
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger

$("#mycheckbox").click();працював на мене, коли я слухав змінити подію і .attr& .propне запускав подію.
— Дамодар Баш'ял

80

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


5
@ livfree75 видалення перевіреного атрибута унеможливлює скидання форми
— mcgrailm

5
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger

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

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


4
перше не вдасться ...
— Позначено,

5
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger

IMO clickподія є недостовірною у Firefox та Edge.
— Вахід Амірі

62

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

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

або

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

і щоб зняти прапорець, завжди слід встановити його на значення false:

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

1
Це неточно. встановлення атрибута "Позначено" на "" не зніме прапорці принаймні в хромі.
— cwharris

@xixonia Я зробив тест до того, як опублікував вашу скрипку, не працює, тому що ви не змінили меню зліва, щоб включити jquery
— mcgrailm

1
mcgralim - в 1.6 його ще простіше .... $(".mycheckbox").prop("checked", true/false)
— gnarf

2
@MarkAmery Ви згадали, що в моєму дописі нічого не додано на момент публікації, але це точно. Якщо ви подивитесь на історію прийнятої відповіді, ви знайдете, вони пропонують видалити елемент. Що унеможливлює скидання форми, саме тому я і розмістив її для початку.
— mcgrailm

1
@mcgrailm Я пішов наперед і змінив прийняту відповідь з огляду на ваші зауваження. Якщо ви хочете кинути на це погляд і перевірити, чи добре він виглядає в його нинішньому стані, я би вдячний. Мої вибачення знову за те, що я запропонував різку критику, яка була, принаймні частково, дуже помилкова.
— Марк Амері

51

Це вибирає елементи, які мають вказаний атрибут зі значенням, що містить задану підрядку "ckbItem":

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

Він вибере всі елементи, які містять ckbItem у своєму атрибуті name.


46

Якщо припустити, що питання ...

Як встановити прапорець ВИМОГА?

Пам'ятайте, що в типовому наборі прапорців усі вхідні теги мають однакове ім'я, вони відрізняються за атрибутомvalue : для кожного вводу набору немає ідентифікатора.

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

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

45

Я пропускаю рішення. Я завжди буду використовувати:

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

3
Це не відповідає на запитання (питання полягає у встановленні того, чи встановлено прапорець, а не про те, чи встановлено прапорець). Це також досить некрасивий спосіб визначити, чи встановлено прапорець (з одного боку, ви використовуєте не самоочевидний факт, який .val()завжди повертається, undefinedколи буде викликано 0 елементів, щоб виявити, що об’єкт jQuery порожній, коли ви могли просто перевірте її .lengthзамість) - див. stackoverflow.com/questions/901712/… для більш читабельних підходів.
— Марк Амері

42

Щоб встановити прапорець за допомогою jQuery 1.6 або вище, просто зробіть це:

checkbox.prop('checked', true);

Щоб зняти прапорець, використовуйте:

checkbox.prop('checked', false);

Ось що я хочу використовувати для перемикання прапорця за допомогою jQuery:

checkbox.prop('checked', !checkbox.prop('checked'));

Якщо ви використовуєте jQuery 1.5 або новішої версії :

checkbox.attr('checked', true);

Щоб зняти прапорець, використовуйте:

checkbox.attr('checked', false);

37

Ось спосіб це зробити без jQuery

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


31

Ось код для перевірених і не перевірених за допомогою кнопки:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

Оновлення: Ось той самий блок коду, використовуючи новіший метод підтримки Jquery 1.6+, який замінює attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

4
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger

30

Спробуйте це:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

29

Ми можемо використовувати elementObjectjQuery для перевірки атрибута:

$(objectElement).attr('checked');

Ми можемо використовувати це для всіх версій jQuery без будь-яких помилок.

Оновлення: Jquery 1.6+ має новий метод підтримки, який замінює attr, наприклад:

$(objectElement).prop('checked');

2
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger

25

Якщо ви використовуєте PhoneGap для розробки програм, і у вас є значення кнопки, яку ви хочете показати миттєво, не забудьте зробити це

$('span.ui-[controlname]',$('[id]')).text("the value");

Я виявив, що без проміжку інтерфейс не буде оновлюватися незалежно від того, що ви робите.


25

Ось код і демонстрація того, як встановити декілька прапорців ...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

- 1; змішування селекторів jQuery, наприклад, $("#check")із необробленими дзвінками API DOM, як document.getElementsByTagName("input")мені здається, не є елегантним, особливо, враховуючи, що forциклів тут можна уникнути за допомогою використання .prop(). Незважаючи на це, це ще одна пізня відповідь, яка не додає нічого нового.
— Марк Амері


19

Як @ livefree75 сказав:

jQuery 1.5.x і нижче

Ви також можете розширити об’єкт $ .fn новими методами:

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

Але в нових версіях jQuery ми повинні використовувати щось подібне:

jQuery 1.6+

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

Тоді ви можете просто зробити:

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

18

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

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

18

Будьте в курсі витоків пам'яті в Internet Explorer перед Internet Explorer 9 , як зазначено в документації jQuery :

В Internet Explorer до версії 9 використання .prop () для встановлення властивості елемента DOM будь-що, крім простого примітивного значення (число, рядок або булеве значення), може спричинити витік пам'яті, якщо властивість не буде видалено (використовуючи .removeProp ( )) перед тим, як елемент DOM буде видалений з документа. Щоб безпечно встановити значення на об'єктах DOM без витоку пам'яті, використовуйте .data ().


2
Це не має значення, оскільки всі (правильні) відповіді використовують .prop('checked',true).
— Blazemonger

Не впевнений, що я зрозумів ваш коментар. Це все ще існує в документації на jQuery. Ви маєте на увазі, що в IE <9 немає витоку пам'яті?
— Наор

2
Там немає витоку пам'яті в цьому випадку, так як ми будемо встановити його в просте примітивне значення (Boolean).
— Blazemonger

18

Для jQuery 1.6+

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

Для jQuery 1.5.x та нижче

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

Перевіряти,

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

17

Щоб перевірити та зняти прапорець

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

3
- 1; це не додає ніякого значення вже роздутій нитці. Код тут точно такий же, як і прийнята відповідь.
— Марк Амері

16
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

4
- 1 за те, що є кодовою відповіддю, не відповідає на питання безпосередньо і нічого не додав, що інші відповіді ще не охоплювали.
— Марк Амері

15

Це, мабуть, найкоротше і найпростіше рішення:

$(".myCheckBox")[0].checked = true;

або

$(".myCheckBox")[0].checked = false;

Ще коротше буде:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

Ось і jsFiddle .


14

Простий JavaScript дуже простий і набагато менше накладних:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

Приклад тут


@MarkAmery Прийнята відповідь не пояснює, як це зробити без jQuery. Моя відповідь додає додаткової користі прийнятій відповіді.
— Alex W

13

Я не міг змусити його працювати, використовуючи:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

Істинними, і хибними буде встановлено прапорець. Що для мене працювало:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

16
вона не повинна бути trueі falseі не 'true'та 'false'?
— tpower

9
Він "не працював", оскільки 'false'був перетворений в булеве значення, в результаті чого trueпорожня рядок оцінюється, falseтаким чином вона "працювала". Дивіться цей загадку для прикладу того, що я маю на увазі.
— Shadow Wizard - це вухо для вас

@ chris97ong я відкрутив вашу редакцію; коли хтось каже "Не використовуйте код нижче, тому що він не працює", виправляючи цей код, залишаючи коментар, кажучи, що він не працює, це шкідливо - особливо, коли він порушує пояснення в коментарях, чому код не використовується Я не працюю. Однак, ця відповідь все ще дещо плутає і заслуговує на ослаблення з причин, що надаються tpower та ShadowWizard.
— Марк Амері

1
використовувати істинні та хибні значення для булевих, не використовувати 'true' або 'false' (рядки).
— Jone Polvora

13

Коли ви встановили прапорець як-от;

$('.className').attr('checked', 'checked')

це може бути недостатньо Ви також повинні зателефонувати нижче за функцією;

$('.className').prop('checked', 'true')

Особливо, коли ви зняли прапорець прапорець.


11

Ось повний відповідь за допомогою jQuery

Я тестую це, і він працює на 100%: D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

10

У jQuery,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

або

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

У JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

7
Це не дає відповіді на запитання.
— Самуель Liew

2
Ця відповідь застаріла, оскільки вона використовується .attrзамість .prop.
— Blazemonger
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.