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

avatar
tpower
8 января 2009 в 22:20
3494186
43
4340

Я хотел бы сделать что-то подобное, чтобы отметить checkbox, используя jQuery : 

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

или 

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

Такое существует?

Источник
Peter Krauss
9 марта 2012 в 12:36
0

Более конкретный (и очень полезный!) Вопрос «Как мне проверить элемент в установленном флажке ПО ЗНАЧЕНИЮ?», Я думаю, мы также можем обсудить здесь, и я разместил ответ ниже.

Subodh Ghulaxe
25 февраля 2014 в 15:46
0

Проверьте другие способы сделать это с помощью jQuery здесь coderhelper.com/a/22019103/1868660

HumanInDisguise
11 мая 2015 в 14:06
0

Если вам нужно инициировать событие onchange, это $("#mycheckbox").click();

Alireza
12 мая 2015 в 17:26
0

«Проверка чего-либо» предполагает тестирование, поэтому я думаю, что «Установить флажок» - более понятный и лучший заголовок.

yogihosting
23 мая 2016 в 15:01
0

prop (); функция - прекрасный ответ. См. Определение функции - api.jquery.com/prop

divine
26 апреля 2017 в 10:52
0

attr () не работает с IE. использование prop () - лучший вариант

Tal
20 сентября 2019 в 07:56
0

$(".myCheckBox").prop("checked", true)

Ответы (43)

avatar
Xian
8 января 2009 в 22:25
6198

Современный jQuery

Используйте .prop(): 

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

DOM API

Если вы работаете только с одним элементом, вы всегда можете просто получить доступ к базовому HTMLInputElement и изменить его .checked свойство4051254920 

$('.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
8 января 2009 в 22:48
1

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

mcgrailm
23 марта 2011 в 15:27
27

@Xian удаление отмеченного атрибута делает невозможным сброс формы

cwharris
6 мая 2011 в 21:12
1

Проблема здесь в том, что вам нужно что-то, что работает для обеих версий. В этом случае вы можете использовать плагин. :) Спасибо за обновление!

cwharris
13 мая 2011 в 20:08
6

В качестве побочного примечания, jQuery 1.6.1 должен исправить проблему, о которой я упоминал, поэтому мы можем технически все еще вернуться к использованию $ (...). Prop (...)

Tyler Crompton
30 марта 2012 в 09:32
19

«Если вы работаете только с одним элементом, всегда будет быстрее всего использовать DOMElement.checked = true». Но это было бы ничтожно мало, потому что это всего лишь один элемент ...

Katie Kilian
4 мая 2012 в 16:28
49

Как говорит Тайлер, это незначительное улучшение производительности. Для меня кодирование с использованием общего API делает его более читабельным, чем смешивание собственного API и jQuery API. Я бы придерживался jQuery.

gnarf
1 октября 2012 в 23:35
18

@TylerCrompton - Конечно, дело не только в производительности, но выполнение $(element).prop('checked') - это пустая трата набора текста. element.checked существует и должен использоваться в тех случаях, когда у вас уже есть element

Timothy
11 июля 2021 в 06:51
0

Как я могу увидеть prop () в исходном коде. Я попытался выполнить поиск и нашел эти экземпляры, но ничего, что мне показалось правильным: pix.realquadrant.com/jquery-prop

avatar
vnapastiuk
29 июля 2021 в 07:06
-1

Если вы думаете об использовании vanilla js вместо jquery, есть решение: 

//for one element: 
document.querySelector('.myCheckBox').checked = true /* or false */ //will select the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
checkbox.checked = true //or false
}
avatar
Omar Odeh
4 декабря 2020 в 12:15
1

Вы можете сделать это, если у вас есть идентификатор для проверки

document.getElementById('ElementId').checked = false

И это для снятия отметки

document.getElementById('ElementId').checked = true

avatar
Kamil Kiełczewski
27 декабря 2019 в 21:53
1

Решение JavaScript также может быть простым и с меньшими накладными расходами: 

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)


document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>
Heretic Monkey
27 декабря 2019 в 22:03
1

Это относится к флажку «Проверить / снять» с помощью JavaScript (jQuery или Vanilla)? или JavaScript проверять несколько флажков, а не этого вопроса jQuery.

avatar
L Y E S - C H I O U K H
2 января 2019 в 15:10
6

Отредактировано в январе 2019 г.

Вы можете использовать: .prop (propertyName) - версия добавлена: 1.6 

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

В Angular Framework

Пример 1

В вашем .html файле 

<input type="checkbox" (change)="toggleEditable($event)">

В вашем файле .ts 

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

Пример 2

В вашем .html файле 

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
avatar
Alex Montoya
15 сентября 2018 в 17:57
8

Если вы используете .prop('checked', true|false) и не изменили флажок , вам нужно добавить trigger('click') следующим образом: 

// Check
$('#checkboxF1').prop( "checked", true).trigger('click');


// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');
pangyuteng
8 августа 2020 в 02:10
0

так рада, что нашла это. Спасибо! почти сошла с ума !!

avatar
Gaurang Sondagar
1 декабря 2017 в 07:08
6

Проверить состояние флажка можно разными способами с помощью JavaScript. Вы можете увидеть ниже.

  1. Первый способ - $('.myCheckbox').prop('checked', true);

  2. Второй способ - $('.myCheckbox').attr('checked', true);

  3. Третий метод (для проверки условия, если флажок установлен или нет) - $('.myCheckbox').is(':checked')

avatar
David Arul
1 ноября 2017 в 13:19
10

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Stephen Rauch
1 ноября 2017 в 13:48
2

При ответе желательно дать какое-то объяснение, ПОЧЕМУ именно ваш ответ.

avatar
Kenmeister
14 марта 2017 в 20:32
5

Если вы используете Bootstrap (возможно, не подозревая) ... 

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

avatar
Sedrick
29 сентября 2016 в 13:55
10

Это может кому-то помочь.

HTML5 

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript. 

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }

avatar
Ardalan Shahgholi
23 сентября 2016 в 18:43
22

Как сказал @ 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();
avatar
logan
21 апреля 2015 в 10:29
19

Для 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');
avatar
Serhat Koroglu
5 марта 2015 в 13:10
14

Когда вы установили флажок, например: 

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

этого может быть недостаточно. Вы также должны вызвать функцию ниже: 

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

Особенно после того, как вы удалили атрибут "флажок".

avatar
DmitryBoyko
8 июля 2014 в 18:22
11

Если вы используете ASP.NET MVC, сгенерируйте много флажков, а затем задайте , чтобы выбрать / отменить выбор всех с помощью с помощью JavaScript, вы можете сделать следующее.

>

HTML 

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript 

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }
tpower
9 июля 2014 в 14:58
0

Зачем здесь нужен каждый?

avatar
Peter Krauss
9 июня 2014 в 15:07
48

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

Как установить флажок ПО ЗНАЧЕНИЮ?

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

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
avatar
Friedrich
27 мая 2014 в 15:11
16

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

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

или 

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

Еще короче: 

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

Здесь также a jsFiddle.

avatar
anusha
23 апреля 2014 в 06:34
6

Вы можете попробовать следующее: 

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
avatar
jj2422
14 ноября 2013 в 06:34
18

Чтобы установить и снять флажок 

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
Mark Amery
15 декабря 2014 в 18:25
3

- 1; это не добавляет никакой ценности уже раздутому потоку. Код здесь точно такой же, как принятый ответ.

avatar
Muhammad Aamir Ali
12 октября 2013 в 08:23
22

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

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
avatar
Alex W
18 сентября 2013 в 01:14
15

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

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

Пример здесь

Alex W
15 декабря 2014 в 20:12
0

@MarkAmery В принятом ответе не рассматривается, как это сделать без jQuery. Мой ответ добавляет дополнительную пользу к принятому ответу.

avatar
eggshot
13 сентября 2013 в 06:37
-6

Для всего: 

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
avatar
tamilmani
16 августа 2013 в 06:17
26

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

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;
        }
    }
});
Mark Amery
15 декабря 2014 в 18:33
0

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

avatar
mahmoh
16 июля 2013 в 02:10
17
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
Mark Amery
15 декабря 2014 в 18:28
4

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

avatar
ijarlax
10 июня 2013 в 13:17
10

В jQuery, 

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

или 

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

В JavaScript, 

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
Samuel Liew♦
10 июня 2013 в 13:20
7

Это не отвечает на вопрос.

Blazemonger
21 января 2014 в 14:20
2

Этот ответ устарел, потому что в нем используется .attr вместо .prop.

avatar
naor
22 мая 2013 в 07:25
18

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

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

Blazemonger
21 января 2014 в 14:19
2

Это не имеет значения, поскольку во всех (правильных) ответах используется .prop('checked',true).

naor
21 января 2014 в 20:53
0

Не уверен, что понял ваш комментарий. Он все еще существует в документации jQuery. Вы хотите сказать, что в IE <9 нет утечки памяти?

Blazemonger
21 января 2014 в 20:56
2

В этом случае утечки памяти нет, поскольку мы устанавливаем для него простое примитивное значение (Boolean).

avatar
mathew
13 мая 2013 в 09:50
7
$(".myCheckBox").prop("checked","checked");
Blazemonger
21 января 2014 в 14:21
2

Этот ответ устарел, поскольку в нем используется .attr вместо .prop.

avatar
Ramon de Jesus
14 марта 2013 в 09:40
43

Чтобы установить флажок с помощью 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);
avatar
user1477929
27 февраля 2013 в 15:49
12

Вот полный ответ с использованием 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
    });
avatar
Matt Peacock
11 января 2013 в 13:05
19

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

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
avatar
Xitalogy
23 октября 2012 в 00:41
38

Вот способ сделать это без 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>
avatar
prashanth
10 сентября 2012 в 10:26
31

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

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

$('#checkboxid').get(0).checked = false; //For unchecking
avatar
Overbeeke
24 июня 2012 в 11:33
46

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

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
Mark Amery
14 декабря 2014 в 23:47
3

Это не отвечает на вопрос (вопрос касается установки , установлен ли флажок, а не определения, установлен ли флажок). Это также довольно уродливый способ определить, установлен ли флажок (с одной стороны, вы используете неочевидный факт, что .val() всегда будет возвращать undefined при вызове 0 элементов, чтобы определить, что объект jQuery пусто, вместо этого вы можете просто проверить его .length) - см. coderhelper.com/questions/901712/… для более удобочитаемых подходов.

avatar
Clement Ho
17 апреля 2012 в 06:34
26

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

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

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

avatar
fredcrs
5 января 2012 в 13:26
14

Мне не удалось заставить его работать, используя: 

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

И истина, и ложь установят флажок. Для меня сработало: 

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
tpower
5 января 2012 в 15:34
16

Разве это не должно быть true и false, а не 'true' и 'false'?

Shadow Wizard Wearing Mask V2
24 июня 2012 в 11:41
9

Это «не сработало», потому что 'false' было преобразовано в логическое значение, что привело к true - пустая строка оценивается как false, поэтому она «сработала». См. эту скрипку для примера того, что я имею в виду.

Mark Amery
15 декабря 2014 в 18:46
0

@ chris97ong Я отменил ваше изменение; когда кто-то говорит: «Не используйте приведенный ниже код, потому что он не работает», исправляя этот код, оставляя комментарий о том, что он не работает, вредно, особенно когда он нарушает объяснение в комментарии , почему код не работает. Тем не менее, этот ответ все еще несколько запутан и заслуживает отрицательной оценки по причинам, указанным tpower и ShadowWizard.

Jone Polvora
21 февраля 2015 в 22:34
1

используйте значения «истина» и «ложь» для логических значений, не используйте «истина» или «ложь» (строки).

avatar
starjahid
25 октября 2011 в 08:51
32

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

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+ prop, который заменяет 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;
    });
});
Blazemonger
21 января 2014 в 14:18
4

Этот ответ устарел, поскольку в нем используется .attr вместо .prop.

avatar
Prasanth P
24 июня 2011 в 08:27
30

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

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

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

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

$(objectElement).prop('checked');
Blazemonger
21 января 2014 в 14:18
2

Этот ответ устарел, поскольку в нем используется .attr вместо .prop.

avatar
cwharris
6 мая 2011 в 19:31
327

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

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

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

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

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

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

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

Fiddle

Решение:

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

Fiddle

Этот плагин изменяет отмеченное свойство любых элементов, выбранных 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;
});
Daniel X Moore
30 января 2012 в 07:00
5

В вашем первом примере JSFiddle вы должны использовать removeAttr('checked'), а не attr('checked', false)

cwharris
30 января 2012 в 13:28
4

@DanielXMoore, вы обходите стороной вопрос. Пример должен был показать, что после того, как пользователь щелкнул флажок, браузер больше не реагирует на изменения атрибутов checked, независимо от метода, используемого для их изменения.

Daniel X Moore
2 февраля 2012 в 01:45
3

@ChristopherHarris Хорошо, ты прав, я это пропустил. Начиная с jQuery 1.6, не следует ли вам использовать метод .prop? $('.myCheckBox').prop('checked', true) Таким образом, он будет автоматически применяться ко всему набору совпадающих элементов (хотя только при настройке получение по-прежнему будет только первым)

cwharris
2 февраля 2012 в 02:40
0

да. prop определенно является подходящим способом установки атрибутов элемента.

Joe Johnston
4 марта 2014 в 03:59
0

@ChristopherHarris, я добавил в плагин то, что мне нужно, чтобы обеспечить некоторую гибкость параметров. Это упростило встроенную обработку без преобразования типа. Особенно из разрозненных баз данных с «идеями» о том, что такое «правда». Скрипка: jsfiddle.net/Cyberjetx/vcp96

avatar
mcgrailm
23 марта 2011 в 15:22
63

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

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

или 

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

, а чтобы снять флажок, всегда следует устанавливать значение false: 

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

Если вы сделаете 

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

он удаляет атрибут полностью, поэтому вы не сможете сбросить форму.

ПЛОХОЙ ДЕМО 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');
    }
});
cwharris
6 мая 2011 в 05:58
1

Это неточно. установка атрибута 'checked' на '' , а не снимет флажки хотя бы в chrome.

mcgrailm
6 мая 2011 в 18:44
0

@xixonia Я тестировал, прежде чем опубликовать вашу скрипку, не работает, потому что вы не изменили меню слева, чтобы включить jquery

mcgrailm
6 мая 2011 в 20:10
0

@xixonia еще раз спасибо. Кажется, это не работает так же в jquery 1.6, см. примечание выше, спасибо за добавление вашего решения.

gnarf
6 мая 2011 в 20:11
1

mcgralim - в 1.6 стало еще проще .... $(".mycheckbox").prop("checked", true/false)

mcgrailm
6 мая 2011 в 20:14
0

@gnarf это здорово, но теперь мне придется изменить это во всем моем коде 8 ^ (

gnarf
6 мая 2011 в 20:18
0

@mcgrailm - он все еще не выпущен, но мы, возможно, добавим некоторую обратную совместимость для .attr() с логическими атрибутами - хотя я бы хотел, чтобы мы этого не делали - Читайте: forum.jquery.com/topic/prop-attr -rewrite-again

mcgrailm
21 января 2014 в 14:20
0

@Blazemonger, вы имеете в виду, что используете .prop, а не .attr?

Blazemonger
21 января 2014 в 14:25
0

Ваш ответ обещал новое актуальное решение, которого вы никогда не предоставляли. .attr был неправильным, подходом к этой проблеме уже более двух лет.

mcgrailm
21 января 2014 в 14:29
0

В то время я опубликовал исправленный ответ, но это было 4 года назад, чувак. Я не обновляю все свои сообщения, и я уверен, что большинство людей этого не делают. Вы голосовали против поста четырехлетней давности, в котором говорилось, что он устарел, ну да

Mark Amery
14 декабря 2014 в 23:43
0

@DaveRager в этом случае, однако, устаревшие ответы не только устарели, но и полностью избыточны, поскольку принятый ответ уже отлично покрывает их содержимое. Нет смысла обновлять устаревший ответ, если впоследствии он все еще не пригодится.

mcgrailm
15 декабря 2014 в 14:50
2

@MarkAmery, вы упомянули, что мой пост ничего не добавил во время публикации, но это точно. Если вы посмотрите историю принятого ответа, вы обнаружите, что они предлагают удалить элемент. Из-за чего невозможно сбросить форму, поэтому я и опубликовал ее для начала.

Mark Amery
15 декабря 2014 в 16:54
1

@mcgrailm Я пошел дальше и изменил принятый ответ в свете ваших замечаний. Если вы хотите взглянуть на него и проверить, хорошо ли он выглядит в текущем состоянии, я буду признателен. Еще раз приношу свои извинения за резкую критику, которая, по крайней мере частично, была в высшей степени ошибочной.

avatar
Abou-Emish
20 сентября 2010 в 11:43
53

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

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

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

avatar
livefree75
20 августа 2010 в 18:19
82

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

mcgrailm
23 марта 2011 в 15:32
5

@ livfree75 удаление отмеченного атрибута делает невозможным сброс формы

Blazemonger
21 января 2014 в 14:16
5

Этот ответ устарел, поскольку в нем используется .attr вместо .prop.

avatar
Chris Brandsma
8 января 2009 в 22:36
66
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

redsquare
9 января 2009 в 00:20
4

верхний не удастся ... check не является членом объекта jquery

Blazemonger
21 января 2014 в 14:16
5

Этот ответ устарел, потому что в нем используется .attr вместо .prop.

Vahid Amiri
31 августа 2019 в 11:21
0

IMO событие click ненадежно в Firefox и Edge.

avatar
bchhun
8 января 2009 в 22:25
745

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

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

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

$('.myCheckbox').is(':checked');
eomeroff
2 мая 2011 в 23:56
4

также $ (selector) .checked to check проверяется

JD Smith
28 марта 2013 в 01:26
6

Я попробовал этот точный код, и он не сработал для меня в случае флажка «выбрать все / не выбрать ничего», который должен проверять и снимать все флажки, а также проверять их состояние. Вместо этого я попробовал ответить @Christopher Harris, и это помогло.

YuriAlbuquerque
11 октября 2013 в 15:27
0

Зачем использовать "form #mycheckbox" вместо просто "#mycheckbox"? Идентификатор уже уникален во всем документе, его проще и быстрее выбрать напрямую.

bchhun
13 октября 2013 в 00:14
0

@YuriAlbuquerque, это был пример. вы можете использовать любой селектор, какой захотите.

SineSwiper
7 октября 2015 в 16:42
5

$ (selector) .checked не работает. В jQuery нет "проверенного" метода.

avatar
Micah
8 января 2009 в 22:24
153

Вы можете сделать 

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

или 

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

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

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

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

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

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
Chris Brandsma
8 января 2009 в 22:37
0

вы также можете использовать $ ("# myTable input: checkbox"). each (...);

RobertPitt
20 сентября 2010 в 11:49
0

Вы также можете пойти $(".myCheckbox").click()

mcgrailm
23 марта 2011 в 15:32
3

@Michah удаление отмеченного атрибута делает невозможным сброс формы

Blazemonger
21 января 2014 в 14:15
12

Этот ответ устарел, поскольку в нем используется .attr вместо .prop.

Damodar Bashyal
1 мая 2017 в 06:30
0

$("#mycheckbox").click(); работал у меня, так как я тоже слушал событие изменения, а .attr & .prop не запускал событие изменения.