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

4133

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

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

или

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

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

TPower
источник
Более конкретный (и очень полезный!) Вопрос: «Как проверить элемент в наборе флажков BY VALUE?», Я думаю, что мы также можем обсудить здесь, и я разместил ответ ниже.
Питер Краусс
Проверьте другие способы сделать это с помощью jQuery здесь stackoverflow.com/a/22019103/1868660
Subodh Ghulaxe
Если вам нужно вызвать событие onchange, это$("#mycheckbox").click();
HumanInDisguise
«Проверка чего-либо» предлагает протестировать его, поэтому я думаю, что «Сделать флажок отмеченным» - более понятное и лучшее название.
Алиреза
проп (); функция является идеальным ответом. См. Определение функции - 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()документации .

Xian
источник
26
@Xian удаление атрибута флажка делает невозможным сброс формы
mcgrailm
6
В качестве примечания, jQuery 1.6.1 должен исправить проблему, о которой я говорил, так что мы все технически можем вернуться к использованию $ (...). Prop (...)
cwharris
19
«Если вы работаете только с одним элементом, он всегда будет самым быстрым в использовании DOMElement.checked = true». Но это было бы незначительным, потому что это только один элемент ...
Тайлер Кромптон
47
Как говорит Тайлер, это незначительное улучшение производительности. Для меня кодирование с использованием общего API делает его более читабельным, чем смешивание нативного API и API jQuery. Я бы придерживался jQuery.
Чарли Килиан
18
@TylerCrompton - Конечно, речь идет не только о производительности, но $(element).prop('checked')это полная трата текста. element.checkedсуществует и должен использоваться в тех случаях, когда у вас уже естьelement
gnarf
705

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

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

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

$('.myCheckbox').is(':checked');
bchhun
источник
4
также проверяется $ (селектор). проверено
eomeroff
6
Я попробовал этот точный код, и он не работал для меня в случае флажка «выбрать все / выбрать нет», который должен проверять и снимать все, а также проверять их состояние. Вместо этого я попробовал ответ @Christopher Harris, и это помогло.
ДД Смит
Почему вместо «#mycheckbox» используется «form #mycheckbox»? Идентификатор уже уникален во всем документе, его проще и быстрее выбрать.
ЮрийАльбукерке
@YuriAlbuquerque это был пример. Вы можете использовать любой селектор, который вы хотите.
bchhun
5
$ (селектор) .checked не работает. В jQuery нет метода «проверено».
Брендан Берд
318

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

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

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

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

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

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

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

скрипка

Решение:

Используя JavaScript-проверенное свойство для элементов 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;
});
cwharris
источник
5
В вашем первом примере JSFiddle вы должны использовать, removeAttr('checked')а неattr('checked', false)
Daniel X Moore
4
@DanielXMoore, вы обходите проблему. Примером было показать, что после того, как пользователь установил флажок, браузер больше не реагирует на checkedизменения атрибутов, независимо от способа их изменения.
cwharris
3
@ChristopherHarris Хорошо, ты прав, я пропустил это. Начиная с jQuery 1.6, разве вы не должны использовать метод .prop? $('.myCheckBox').prop('checked', true)Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (только при настройке, получение все еще только первый)
Даниэль Х Мур
Да. propэто определенно подходящий способ установить атрибуты элемента.
cwharris
@ChristopherHarris, я добавил в плагин то, что мне было нужно, чтобы обеспечить некоторую гибкость параметров. Это облегчает встроенную обработку без преобразования типов. Esp из разрозненных баз данных с «идеями» о том, что такое «правда». Скрипка: jsfiddle.net/Cyberjetx/vcp96
Джо Джонстон,
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"). each (...);
Крис Брандсма
Вы также можете пойти$(".myCheckbox").click()
Роберт Питт
3
@Michah удаление атрибута checked делает невозможным сброс формы
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 (), если вы используете какую-то другую библиотеку, которая использует эти имена.

livefree75
источник
5
@ livfree75 удаление атрибута флажка делает невозможным сброс формы
mcgrailm
5
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger
64
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

Крис Брандсма
источник
4
первый не удастся ... проверено не является членом объекта jquery
redsquare
5
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger
ИМО clickсобытие ненадежно в Firefox и Edge.
Вахид Амири
62

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

 $('.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');
    }
});
mcgrailm
источник
1
Это неточно. установка атрибута 'checked' в '' не снимает флажки, по крайней мере, в Chrome.
cwharris
@xixonia Я проверил, прежде чем опубликовать вашу скрипку, не работает, потому что вы не изменили меню слева, чтобы включить jquery
mcgrailm
1
McGralim - в 1.6 это еще проще .... $(".mycheckbox").prop("checked", true/false)
Gnarf
2
@MarkAmery вы упомянули, что мой пост ничего не добавил во время поста, но это точно. Если вы посмотрите историю принятых ответов, то обнаружите, что они предлагают удалить элемент. Что делает невозможным сброс формы, именно поэтому я отправил для начала.
mcgrailm 15.12.14
1
@mcgrailm Я пошел дальше и изменил принятый ответ в свете ваших замечаний. Если вы хотите взглянуть на него и убедиться, что он выглядит хорошо в его текущем состоянии, я был бы признателен за это. Еще раз извиняюсь за резкую критику, которая была, по крайней мере, частично ошибочной.
Марк Амери
51

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

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

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

Абу-Emish
источник
46

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

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

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

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
Peter Krauss
источник
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>

Xitalogy
источник
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;
    });
});

Обновление: здесь тот же блок кода, использующий более новый метод 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;
    });
});
starjahid
источник
4
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger
30

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

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

$('#checkboxid').get(0).checked = false; //For unchecking
Prashanth
источник
29

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

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

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

Обновление: Jquery 1.6+ имеет новый метод prop, который заменяет 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;
        }
    }
});
tamilmani
источник
- 1; Смешивание селекторов jQuery, как $("#check")с необработанными вызовами API DOM, document.getElementsByTagName("input")кажется мне неуместным, особенно если учесть, что использование forциклов можно избежать .prop(). Несмотря на это, это еще один поздний ответ, который не добавляет ничего нового.
Марк Амери
20

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

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
Мухаммед Амир Али
источник
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);
jj2422
источник
3
- 1; это не добавляет никакой ценности к уже раздутому потоку. Код здесь точно такой же, как принятый ответ.
Марк Амери
16
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
mahmoh
источник
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;
}

Пример здесь

Алекс W
источник
@MarkAmery Принятый ответ не охватывает, как это сделать без jQuery. Мой ответ добавляет дополнительное преимущество к принятому ответу.
Алекс W
13

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

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

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

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
fredcrs
источник
16
не должно быть trueи falseи не 'true'и 'false'?
tpower
9
Это «не сработало», потому что 'false'было преобразовано в логическое значение, в результате чего true- пустая строка вычисляет, falseтаким образом, это «сработало». Посмотрите эту скрипку для примера того, что я имею в виду.
Shadow Wizard - это ухо для тебя
@ chris97ong Я откатил твою правку; когда кто-то говорит: «Не используйте приведенный ниже код, потому что он не работает», исправление этого кода при оставлении комментария о том, что он не работает, вредно, особенно когда оно нарушает объяснение в комментариях, почему код не работает. не работает Тем не менее, этот ответ все еще несколько запутан и заслуживает отрицательного ответа по причинам, указанным tpower и ShadowWizard.
Марк Амери
1
используйте значения true и false для логического значения, не используйте 'true' или 'false' (строки).
Джоне Полвора
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");
}
ijarlax
источник
7
Это не отвечает на вопрос.
Самуэль Лью
2
Этот ответ устарел, потому что он использует .attrвместо .prop.
Blazemonger