Установка «checked» для флажка с jQuery?

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

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

или

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

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

вопрос задан 8.01.2009
tpower
23296 репутация

39 ответов


  • 5464 рейтинг

    jQuery 1.6+

    Используйте новый метод .prop() :

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

    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() .

    Любая версия jQuery

    Если вы работаете только с одним элементом, вы всегда можете просто модифицировать HTMLInputElement «S .checked свойство:

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

    Преимущество использования .prop() и .attr() методов вместо этого состоит в том, что они будут работать со всеми согласованными элементами.

    ответ дан Xian, с репутацией 64359, 8.01.2009
  • 634 рейтинг

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

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

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

     $('.myCheckbox').is(':checked');
     
    ответ дан bchhun, с репутацией 13615, 8.01.2009
  • 285 рейтинг

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

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

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

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

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

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

    скрипка

    Решение:

    Используя свойство «checked» 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;
    });
     
    ответ дан cwharris, с репутацией 14661, 6.05.2011
  • 133 рейтинг

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

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

    или

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

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

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

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

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

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

     $(".myCheckbox").each(function(){
        $("#mycheckbox").click()
    });
     
    ответ дан Micah, с репутацией 54038, 8.01.2009
  • 69 рейтинг

    Вы также можете расширить объект $ .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, с репутацией 723, 20.08.2010
  • 60 рейтинг
     $("#mycheckbox")[0].checked = true;
    $("#mycheckbox").attr('checked', true);
    $("#mycheckbox").click();
     

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

    ответ дан Chris Brandsma, с репутацией 9925, 8.01.2009
  • 57 рейтинг

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

      $('.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');
        }
    });
     
    ответ дан mcgrailm, с репутацией 12802, 23.03.2011
  • 42 рейтинг

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

    Как проверить установленный флажок BY VALUE?

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

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

     $("input.myclass[name='myname'][value='the_value']").prop("checked", true);
     
    ответ дан Peter Krauss, с репутацией 4993, 9.03.2012
  • 42 рейтинг

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

     if ($('#myCheckBox:checked').val() !== undefined)
    {
        //Checked
    }
    else
    {
        //Not checked
    }
     
    ответ дан Overbeeke, с репутацией 1119, 24.06.2012
  • 41 рейтинг

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

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

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

    ответ дан Abou-Emish, с репутацией 1053, 20.09.2010
  • 37 рейтинг

    Чтобы установить флажок с помощью 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);
     
    ответ дан Ramon de Jesus, с репутацией 632, 14.03.2013
  • 34 рейтинг

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

    ответ дан Aeoril, с репутацией 1325, 23.10.2012
  • 28 рейтинг

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

     $('#checkboxid').get(0).checked = true;  //For checking
    
    $('#checkboxid').get(0).checked = false; //For unchecking
     
    ответ дан prashanth, с репутацией 289, 10.09.2012
  • 26 рейтинг

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

     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;
        });
    });
     
    ответ дан starjahid, с репутацией 277, 25.10.2011
  • 24 рейтинг

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

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

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

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

     $(objectElement).prop('checked');
     
    ответ дан Prasanth P, с репутацией 520, 24.06.2011
  • 23 рейтинг

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

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

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

    ответ дан Clement Ho, с репутацией 264, 17.04.2012
  • 22 рейтинг

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

    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, с репутацией 455, 16.08.2013
  • 19 рейтинг

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

         var c = $("#checkboxid");
        if (c.is(":checked")) {
             $('#checkboxid').prop('checked', false);
        } else {
             $('#checkboxid').prop('checked', true);
        }
     
    ответ дан Muhammad Aamir Ali, с репутацией 13751, 12.10.2013
  • 17 рейтинг

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

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

    ответ дан naor, с репутацией 1099, 22.05.2013
  • 17 рейтинг

    Для 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');
     
    ответ дан logan, с репутацией 3110, 21.04.2015
  • 17 рейтинг

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

     $("#checkbox1").prop('checked', false).checkboxradio("refresh");
     
    ответ дан Matt Peacock, с репутацией 179, 11.01.2013
  • 16 рейтинг

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

     $('.myCheckbox').prop('checked', true);
    $('.myCheckbox').prop('checked', false);
     
    ответ дан jj2422, с репутацией 344, 14.11.2013
  • 15 рейтинг
    $('controlCheckBox').click(function(){
        var temp = $(this).prop('checked');
        $('controlledCheckBoxes').prop('checked', temp);
    });
    
    ответ дан mahmoh, с репутацией 647, 16.07.2013
  • 14 рейтинг

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

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

    или

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

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

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

    Вот и jsFiddle .

    ответ дан frieder, с репутацией 1065, 27.05.2014
  • 14 рейтинг

    Как сказал @ 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();
     
    ответ дан Ardalan Shahgholi, с репутацией 5672, 23.09.2016
  • 13 рейтинг

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

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

    Пример здесь

    ответ дан Alex W, с репутацией 26699, 18.09.2013
  • 12 рейтинг

    Когда вы установили флажок;

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

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

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

    Особенно, когда вы удалили флажок checked.

    ответ дан Serhat Koroglu, с репутацией 603, 5.03.2015
  • 11 рейтинг

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

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

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

     $("#cb").prop('checked', 'true'); // For checking
    $("#cb").prop('checked', '');     // For unchecking
     
    ответ дан fredcrs, с репутацией 1958, 5.01.2012
  • 10 рейтинг

    Вот полный ответ с помощью 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
        });
     
    ответ дан Matt Peacock, с репутацией 179, 27.02.2013
  • 10 рейтинг

    Если вы используете 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);
            });
        }
     
    ответ дан Academy of Programmer, с репутацией 16872, 8.07.2014
  • 10 рейтинг

    В jQuery,

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

    или

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

    В JavaScript,

     if (document.getElementById("checkboxID").checked){
        alert("Checked");
    }
     
    ответ дан ijarlax, с репутацией 415, 10.06.2013
  • 7 рейтинг

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

    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");
          }    
     }
     
    ответ дан Sedrick, с репутацией 5662, 29.09.2016
  • 5 рейтинг

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

     $('input[name="activity[task_state]"]').val("specify the value you want to check ")
     
    ответ дан anusha, с репутацией 1671, 23.04.2014
  • 4 рейтинг
    $(".myCheckBox").prop("checked","checked");
    
    ответ дан mathew, с репутацией 113, 13.05.2013
  • 3 рейтинг

     if($('jquery_selector').is(":checked")){
      //somecode
    } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

    ответ дан David Arul, с репутацией 71, 1.11.2017
  • 3 рейтинг

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

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

    http://www.bootstraptoggle.com/

    ответ дан Kenmeister, с репутацией 354, 14.03.2017
  • 1 рейтинг

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

    1. Первый метод $ ('. MyCheckbox'). Prop ('checked', true);

    2. Второй метод $ ('. MyCheckbox'). Attr ('checked', true);

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

    ответ дан Gaurang Sondagar, с репутацией 398, 1.12.2017
  • 0 рейтинг

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

     //check
    $('#checkboxF1').prop( "checked", true).trigger('click');
    
    
    //un-Check
    $('#checkboxF1').prop( "checked", true).trigger('click');
     
    ответ дан Alex Montoya, с репутацией 441, 15.09.2018
  • -5 рейтинг

    Для всего:

     $("#checkAll").click(function(){
        $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
    });
     
    ответ дан eggshot, с репутацией 148, 13.09.2013