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

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

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

или

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

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

30 ответов


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


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

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

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

$('.myCheckbox').is(':checked');

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

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

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

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

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

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

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

Скрипка

Решение:

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

Скрипка

этот плагин изменит свойство 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;
});

можно сделать

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

или

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

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

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

вы можете снять на удаление атрибутов:

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

вы можете проверить все флажки, как это:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

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


$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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


чтобы проверить флажок, вы должны использовать

 $('.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');
    }
});

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

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

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

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

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

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

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}

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

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

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


чтобы проверить checkbox с помощью 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);

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

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

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

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

вот код для checked и unchecked с помощью кнопки:

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;
    });
});

Update: вот тот же блок кода, используя новый метод 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;
    });
});

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

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

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

Update: Jquery 1.6+ имеет новый метод prop, который заменяет attr, например:

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

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

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

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


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

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;
        }
    }
});

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

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

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

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

имейте в виду утечки памяти в Internet Explorer до Internet Explorer 9, как состояния документации jQuery:

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


для 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');

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

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

$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

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

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

или

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

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

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

здесь a jsFiddle как хорошо.


как @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();

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

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

пример


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

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

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

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

особенно, когда вы удалили атрибут checkbox checked.


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

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

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

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

вот полный ответ!--3--> с помощью 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
    });

в jQuery,

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

или

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

В JavaScript

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}