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

3319
голосов

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

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

или

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

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

задан tpower 09 янв. '09 в 1:20
источник

37 ответов

  • 1
  • 2
5065
голосов

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() вместо этого состоит в том, что они будут работать со всеми согласованными элементами.

ответ дан Xian 09 янв. '09 в 1:25
источник
595
голосов

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

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

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

$('.myCheckbox').is(':checked');
ответ дан bchhun 09 янв. '09 в 1:25
источник
277
голосов

Это правильный способ проверки и снятия флажков с помощью 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;
});
ответ дан Christopher Harris 06 мая '11 в 22:31
источник
126
голосов

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

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

или

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

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

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

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

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

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

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
ответ дан Micah 09 янв. '09 в 1:24
источник
64
голосов

Вы также можете расширить объект $.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 20 авг. '10 в 21:19
источник
54
голосов
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

ответ дан Chris Brandsma 09 янв. '09 в 1:36
источник
53
голосов

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

 $('.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');
    }
});
ответ дан mcgrailm 23 марта '11 в 18:22
источник
40
голосов

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

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

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

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
ответ дан Peter Krauss 09 марта '12 в 15:28
источник
40
голосов

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

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}
ответ дан Overbeeke 24 июня '12 в 14:33
источник
35
голосов

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

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

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

ответ дан Abou-Emish 20 сент. '10 в 14:43
источник
32
голосов

Вот способ сделать это без 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 23 окт. '12 в 3:41
источник
31
голос

Чтобы установить флажок, используя 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 14 марта '13 в 12:40
источник
27
голосов

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

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

$('#checkboxid').get(0).checked = false; //For unchecking
ответ дан prashanth 10 сент. '12 в 13:26
источник
24
голосов

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

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 25 окт. '11 в 11:51
источник
23
голосов

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

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

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

ответ дан Clement Ho 17 апр. '12 в 9:34
источник
22
голосов

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

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

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

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

$(objectElement).prop('checked');
ответ дан Prasanth P 24 июня '11 в 11:27
источник
21
голос

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

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 16 авг. '13 в 9:17
источник
19
голосов

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

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
ответ дан Muhammad Aamir Ali 12 окт. '13 в 11:23
источник
17
голосов

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

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
ответ дан Matt Peacock 11 янв. '13 в 16:05
источник
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 21 апр. '15 в 13:29
источник
17
голосов

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

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
ответ дан jj2422 14 нояб. '13 в 9:34
источник
17
голосов

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

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

ответ дан naor 22 мая '13 в 10:25
источник
15
голосов
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});
ответ дан mahmoh 16 июля '13 в 5:10
источник
14
голосов

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

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

или

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

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

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

Здесь jsFiddle.

ответ дан frieder 27 мая '14 в 18:11
источник
13
голосов

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

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

Пример здесь

ответ дан Alex W 18 сент. '13 в 4:14
источник
12
голосов

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

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

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

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking
ответ дан fredcrs 05 янв. '12 в 16:26
источник
12
голосов

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

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

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

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

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

ответ дан Serhat Koroglu 05 марта '15 в 16:10
источник
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 08 июля '14 в 21:22
источник
10
голосов

В jQuery

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

или

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

В JavaScript,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}
ответ дан ijarlax 10 июня '13 в 16:17
источник
10
голосов

Как сказал @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 23 сент. '16 в 21:43
источник
  • 1
  • 2

Другие вопросы по меткам