Установка флажка для галочки с помощью jQuery

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

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

или

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

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

8.01.2009 22:20:24
Более конкретный (и очень полезный!) Вопрос: «Как проверить элемент в наборе флажков BY VALUE?», Я думаю, что мы также можем обсудить здесь, и я разместил ответ ниже.
Peter Krauss 9.03.2012 12:36:34
Проверьте другие способы сделать это с помощью jQuery здесь stackoverflow.com/a/22019103/1868660
Subodh Ghulaxe 25.02.2014 15:46:08
Если вам нужно вызвать событие onchange, это$("#mycheckbox").click();
HumanInDisguise 11.05.2015 14:06:24
«Проверка чего-либо» предлагает протестировать его, поэтому я думаю, что «Сделать флажок отмеченным» - более понятное и лучшее название.
Alireza 12.05.2015 17:26:09
проп (); функция является идеальным ответом. См. Определение функции - api.jquery.com/prop
yogihosting 23.05.2016 15:01:01
30 ОТВЕТОВ
РЕШЕНИЕ

Современный 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()документации .

5940
18.08.2019 19:04:24
@Xian удаление атрибута флажка делает невозможным сброс формы
mcgrailm 23.03.2011 15:27:32
В качестве примечания следует упомянуть, что jQuery 1.6.1 должен исправить проблему, о которой я говорил, поэтому мы все технически можем вернуться к использованию $ (...). Prop (...)
cwharris 13.05.2011 20:08:53
«Если вы работаете только с одним элементом, он всегда будет самым быстрым в использовании DOMElement.checked = true». Но это было бы незначительным, потому что это только один элемент ...
Tyler Crompton 30.03.2012 09:32:56
Как говорит Тайлер, это незначительное улучшение производительности. Для меня кодирование с использованием общего API делает его более читабельным, чем смешивание нативных API и API jQuery. Я бы придерживался jQuery.
Charlie Kilian 4.05.2012 16:28:15
@TylerCrompton - Конечно, речь идет не только о производительности, но $(element).prop('checked')это полная трата текста. element.checkedсуществует и должен использоваться в тех случаях, когда у вас уже естьelement
gnarf 1.10.2012 23:35:23

Ты можешь сделать

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

или

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

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

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

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

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

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
147
29.12.2011 18:18:24
Вы также можете перейти $ ("# myTable input: checkbox"). each (...);
Chris Brandsma 8.01.2009 22:37:51
Вы также можете пойти$(".myCheckbox").click()
RobertPitt 20.09.2010 11:49:06
@Michah, удалив проверенный атрибут, делает невозможным сброс формы
mcgrailm 23.03.2011 15:32:40
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:15:55
$("#mycheckbox").click();работал для меня , как я слушал событие изменения также и .attr& .propне срабатывало событие изменения.
Damodar Bashyal 1.05.2017 06:30:54

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

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

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

$('.myCheckbox').is(':checked');
702
18.03.2015 18:34:03
также проверяется $ (селектор). проверено
eomeroff 2.05.2011 23:56:23
Я попробовал этот точный код, и он не работал для меня в случае флажка «выбрать все / выбрать нет», который должен проверять и снимать все, а также проверять их состояние. Вместо этого я попробовал ответ @Christopher Harris, и это помогло.
JD Smith 28.03.2013 01:26:21
Почему вместо «#mycheckbox» используется «form #mycheckbox»? Идентификатор уже уникален во всем документе, его проще и быстрее выбрать.
YuriAlbuquerque 11.10.2013 15:27:03
@YuriAlbuquerque это был пример. Вы можете использовать любой селектор, который вы хотите.
bchhun 13.10.2013 00:14:28
$ (селектор) .checked не работает. В jQuery нет метода «проверено».
Brendan Byrd 7.10.2015 16:42:39
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

64
3.02.2009 17:06:43
первый не удастся ... проверено не является членом объекта jquery
redsquare 9.01.2009 00:20:07
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:16:39
ИМО clickсобытие ненадежно в Firefox и Edge.
Vahid Amiri 31.08.2019 11:21:41

Вы также можете расширить объект $ .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 (), если вы используете какую-то другую библиотеку, которая использует эти имена.

80
20.08.2010 18:19:03
@ livfree75 удаление атрибута флажка делает невозможным сброс формы
mcgrailm 23.03.2011 15:32:58
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:16:16

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

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

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

51
18.07.2018 13:44:09

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

 $('.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');
    }
});
62
29.12.2011 18:21:55
Это неточно. установка атрибута 'checked' в '' не снимает флажки, по крайней мере, в Chrome.
cwharris 6.05.2011 05:58:05
@xixonia Я тестировал, прежде чем опубликовать вашу скрипку, не работает, потому что вы не изменили меню слева, чтобы включить jquery
mcgrailm 6.05.2011 18:44:35
McGralim - в 1.6 это еще проще .... $(".mycheckbox").prop("checked", true/false)
gnarf 6.05.2011 20:11:30
@MarkAmery вы упомянули, что мой пост ничего не добавил во время поста, но это точно. Если вы посмотрите историю принятых ответов, то обнаружите, что они предлагают удалить элемент. Что делает невозможным сброс формы, именно поэтому я отправил для начала.
mcgrailm 15.12.2014 14:50:10
@mcgrailm Я пошел дальше и изменил принятый ответ в свете ваших замечаний. Если вы хотите взглянуть на него и убедиться, что он выглядит хорошо в его текущем состоянии, я был бы признателен за это. Еще раз извиняюсь за резкую критику, которая была, по крайней мере, частично ошибочной.
Mark Amery 15.12.2014 16:54:38

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

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

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

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

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

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

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

скрипка

Решение:

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

скрипка

Этот плагин будет изменять свойство 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;
});
315
31.07.2015 13:43:36
В вашем первом примере JSFiddle вы должны использовать, removeAttr('checked')а неattr('checked', false)
Daniel X Moore 30.01.2012 07:00:08
@DanielXMoore, вы обходите проблему. Примером было показать, что после того, как пользователь установил флажок, браузер больше не реагирует на checkedизменения атрибутов, независимо от способа их изменения.
cwharris 30.01.2012 13:28:29
@ChristopherHarris Хорошо, ты прав, я пропустил это. Начиная с jQuery 1.6, разве вы не должны использовать метод .prop? $('.myCheckBox').prop('checked', true)Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (только при настройке, получение все еще только первый)
Daniel X Moore 2.02.2012 01:45:40
Да. propэто определенно подходящий способ установить атрибуты для элемента.
cwharris 2.02.2012 02:40:32
@ChristopherHarris, я добавил в плагин то, что мне было нужно, чтобы обеспечить некоторую гибкость параметров. Это облегчает встроенную обработку без преобразования типов. Esp из разрозненных баз данных с «идеями» о том, что такое «правда». Скрипка: jsfiddle.net/Cyberjetx/vcp96
Joe Johnston 4.03.2014 03:59:27

Мы можем использовать elementObjectс jQuery для проверки атрибута:

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

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

Обновление: Jquery 1.6+ имеет новый метод prop, который заменяет attr, например:

$(objectElement).prop('checked');
29
11.04.2017 15:53:21
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:18:19

Вот код для проверки и снятия отметки с помощью кнопки:

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

Обновление: здесь тот же блок кода, использующий более новый метод prop 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;
    });
});
31
11.04.2017 15:55:04
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:18:56

Я не мог заставить это работать, используя:

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

И true, и false установили бы флажок. Что сработало для меня:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
13
15.12.2014 18:44:58
не должно быть trueи falseи не 'true'и 'false'?
tpower 5.01.2012 15:34:05
Это «не сработало», потому что 'false'было преобразовано в логическое значение, в результате чего true- пустая строка вычисляет, falseтаким образом, это «сработало». Посмотрите эту скрипку для примера того, что я имею в виду.
Shadow Wizard is Ear For You 24.06.2012 11:41:31
@ chris97ong Я откатил твою правку; когда кто-то говорит: «Не используйте приведенный ниже код, потому что он не работает», исправление этого кода при оставлении комментария о том, что он не работает, вредно, особенно когда оно нарушает объяснение в комментариях, почему код не работает. не работает Тем не менее, этот ответ все еще несколько запутан и заслуживает отрицательного ответа по причинам, указанным tpower и ShadowWizard.
Mark Amery 15.12.2014 18:46:12
используйте значения true и false для логического значения, не используйте 'true' или 'false' (строки).
Jone Polvora 21.02.2015 22:34:07

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

Как проверить флажок-набор по значению?

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

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
45
9.06.2014 15:07:56

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

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

Я обнаружил, что без пролета интерфейс не будет обновляться независимо от того, что вы делаете.

25
16.02.2013 10:32:37

Я скучаю по решению. Я всегда буду использовать:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
45
13.12.2014 16:43:53
Это не отвечает на вопрос (вопрос заключается в том, чтобы установить , установлен ли флажок, а не в том, установлен ли флажок). Это также довольно уродливый способ определить, установлен ли флажок (во-первых, вы используете неочевидный факт, .val()который всегда будет возвращаться undefinedпри вызове 0 элементов, чтобы обнаружить, что объект jQuery пуст, когда вы можете .lengthвместо этого просто проверьте его ) - см. stackoverflow.com/questions/901712/… для более удобочитаемых подходов.
Mark Amery 14.12.2014 23:47:58

Попробуй это:

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

$('#checkboxid').get(0).checked = false; //For unchecking
30
16.02.2013 10:33:47

Вот способ сделать это без 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>

37
10.05.2016 09:58:32

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

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
18
11.01.2013 13:05:35

Вот полный ответ, используя 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
    });
11
27.02.2013 15:49:10

Чтобы установить флажок с использованием 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);
42
9.05.2017 13:23:02
$(".myCheckBox").prop("checked","checked");
6
6.12.2017 11:30:14
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:21:15

Помните об утечках памяти в Internet Explorer до Internet Explorer 9 , как указано в документации jQuery :

В Internet Explorer до версии 9 использование .prop () для установки для свойства элемента DOM чего-либо, кроме простого примитивного значения (число, строка или логическое значение), может привести к утечкам памяти, если свойство не удалено (с помощью .removeProp ( )) до того, как элемент DOM будет удален из документа. Чтобы безопасно установить значения для объектов DOM без утечек памяти, используйте .data ().

18
22.11.2014 15:33:52
Это не имеет значения, так как все (правильные) ответы используют .prop('checked',true).
Blazemonger 21.01.2014 14:19:37
Не уверен, что я понял ваш комментарий. Это все еще существует в документации jQuery. Вы подразумеваете, что в IE <9 нет утечки памяти?
naor 21.01.2014 20:53:17
Там нет утечки памяти в этом случае, так как мы будем установить его в простое примитивное значение (Boolean).
Blazemonger 21.01.2014 20:56:35

В jQuery,

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

или

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

В JavaScript

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
10
3.04.2014 21:31:55
Это не отвечает на вопрос.
Samuel Liew♦ 10.06.2013 13:20:10
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger 21.01.2014 14:20:34
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
16
16.07.2013 02:57:18
- 1 за ответ только с кодом, не отвечая на вопрос напрямую и не добавляя ничего, что другие ответы еще не охватили.
Mark Amery 15.12.2014 18:28:39

Вот код и демонстрация того, как установить несколько флажков ...

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;
        }
    }
});
25
10.02.2016 13:18:22
- 1; смешивание селекторов jQuery, как $("#check")с необработанными вызовами API DOM, document.getElementsByTagName("input")кажется мне неуместным, особенно если учесть, что forздесь можно избежать циклов .prop(). Несмотря на это, это еще один поздний ответ, который не добавляет ничего нового.
Mark Amery 15.12.2014 18:33:08

Для общего:

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
-6
13.09.2013 06:37:02

Простой JavaScript очень прост и намного меньше накладных расходов:

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

Пример здесь

14
23.09.2013 01:12:17
@MarkAmery Принятый ответ не охватывает, как это сделать без jQuery. Мой ответ добавляет дополнительное преимущество к принятому ответу.
Alex W 15.12.2014 20:12:47

Другое возможное решение:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
20
21.07.2014 09:34:50

Чтобы проверить и снять

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
17
3.12.2013 02:18:05
- 1; это не добавляет никакой ценности к уже раздутому потоку. Код здесь точно такой же, как принятый ответ.
Mark Amery 15.12.2014 18:25:36

Вы можете попробовать это:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
5
23.04.2014 06:34:58

Это, наверное, самое короткое и простое решение:

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

или

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

Еще короче было бы:

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

Вот и jsFiddle .

15
13.12.2014 16:46:09