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

3780

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

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

или

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

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

  • 0
    Более конкретный (и очень полезный!) Вопрос: «Как проверить элемент в наборе флажков ПО ЗНАЧЕНИЮ?», Я думаю, что мы также можем обсудить здесь, и я разместил ответ ниже.
  • 0
    Проверьте другие способы сделать это с помощью jQuery здесь stackoverflow.com/a/22019103/1868660
Показать ещё 4 комментария
Теги:
checkbox
checked
selected

38 ответов

5135
Лучший ответ

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 .checked:

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

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

  • 1
    Это получение значения или установка значения? Как мне снять это?
  • 1
    Да, это установка значения атрибута, и снимите флажок, удалив атрибут. Я обновил свой ответ, чтобы показать это.
Показать ещё 20 комментариев
654

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

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

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

$('.myCheckbox').is(':checked');
  • 4
    также проверяется $ (селектор). проверено, чтобы проверить
  • 6
    Я попробовал этот точный код, и он не работал для меня в случае флажка «выбрать все / выбрать ни один», который должен проверять и снимать все, а также проверять их состояние. Вместо этого я попробовал ответ @Christopher Harris, и это помогло.
Показать ещё 4 комментария
270

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

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

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

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

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

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

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

Fiddle

Решение:

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

Fiddle

Этот плагин изменит свойство checked любых элементов, выбранных 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;
});
  • 4
    В вашем первом примере JSFiddle вы должны использовать removeAttr('checked') а не attr('checked', false)
  • 4
    @DanielXMoore, вы обходите проблему. Примером было показать, что после того, как пользователь установил флажок, браузер больше не реагирует на checked изменения атрибутов, независимо от способа их изменения.
Показать ещё 4 комментария
124

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

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

или

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

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

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

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

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

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
  • 0
    Вы также можете перейти к $ ("# myTable input: checkbox"). each (...);
  • 0
    Вы также можете перейти $(".myCheckbox").click()
Показать ещё 3 комментария
70

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

  • 4
    @ livfree75 удаление отмеченного атрибута делает невозможным сброс формы
  • 3
    Этот ответ устарел, потому что он использует .attr вместо .prop .
58
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

  • 4
    top потерпит неудачу ... флажок не является членом объекта jquery
  • 4
    Этот ответ устарел, потому что он использует .attr вместо .prop .
54

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

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

или

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

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

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

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

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

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

BAD DEMO jQuery 1.6. Я думаю, что это сломано. Для 1.6 я собираюсь сделать новое сообщение.

НОВЫЙ РАБОЧИЙ ДЕМО jQuery 1.5.2 работает в Chrome.

Оба демо используют

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});
  • 1
    Это неточно. установка атрибута 'checked' в '' не снимает флажки, по крайней мере, в Chrome.
  • 0
    @xixonia Я проверил, прежде чем опубликовать вашу скрипку не работает, потому что вы не изменили меню слева, чтобы включить JQuery
Показать ещё 10 комментариев
44

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

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

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

Как установить флажок-флажок BY VALUE?

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

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

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

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

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

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

35

Чтобы установить флажок, используя 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);
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>
29

Попробуйте следующее:

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

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

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

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

Обновление. Вот тот же блок кода, в котором используется новый метод поддержки Jquery 1.6+, который заменяет attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});
  • 4
    Этот ответ устарел, потому что он использует .attr вместо .prop .
24

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

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

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

23

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

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

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

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

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

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

$(objectElement).prop('checked');
  • 2
    Этот ответ устарел, потому что он использует .attr вместо .prop .
19

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

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
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');
17

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

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

  • 2
    Это не имеет значения, поскольку во всех (правильных) ответах используется .prop('checked',true) .
  • 0
    Не уверен, что я понял ваш комментарий. Это все еще существует в документации jQuery. Вы намекаете, что в IE <9 нет утечки памяти?
Показать ещё 1 комментарий
17

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

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

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

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
  • 3
    - 1; это не добавляет никакой ценности к уже раздутому потоку. Код здесь точно такой же, как принятый ответ.
15
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
  • 4
    - 1 за то, что он является ответом только на код, не отвечает на вопрос напрямую и не добавляет ничего, что другие ответы еще не охватили.
14

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

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

или

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

Еще короче будет:

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

Здесь jsFiddle.

13

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

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

Пример здесь

  • 0
    @MarkAmery Принятый ответ не охватывает, как это сделать без JQuery. Мой ответ добавляет дополнительное преимущество к принятому ответу.
12

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

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

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

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

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

11

Как сказал @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();
11

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

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

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

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
  • 0
    используя JQuery 1,7 мин
  • 16
    не должно ли это быть true и false а не 'true' и 'false' ?
Показать ещё 3 комментария
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);
        });
    }
  • 0
    Почему каждый нужен здесь?
10

В jQuery

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

или

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

В JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
  • 7
    Это не отвечает на вопрос.
  • 2
    Этот ответ устарел, потому что он использует .attr вместо .prop .
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
    });
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");
      }    
 }
5

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

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
4
$(".myCheckBox").prop("checked","checked");
  • 0
    Функция attr () не будет работать для нескольких переключателей.
  • 2
    Этот ответ устарел, потому что он использует .attr вместо .prop .
3

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

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

http://www.bootstraptoggle.com/

2

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="/jquery.min.js"></script>
1

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

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

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

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

-3

В целом:

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});

Ещё вопросы

Сообщество Overcoder
Наверх
Меню