Установка “проверено” для флажка с помощью jQuery?

Question

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

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

или

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

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

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

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

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

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

Fiddle

Решение.

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

Скрипка

Этот плагин будет изменять свойство selected любых элементов, выбранных 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;
});

Answer 4

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

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

или

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

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

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

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

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

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

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

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

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

Answer 10

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

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

Answer 11

Чтобы установить флажок с помощью 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);

Answer 12

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

Answer 13

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

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

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

Answer 14

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

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

Answer 15

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

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

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

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

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

Answer 16

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

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

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

Answer 17

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

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

Answer 18

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

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

Answer 19

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

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

Answer 20

Знайте об утечках памяти в Internet & nbsp; Explorer до Internet & nbsp; Explorer & nbsp; 9 , так как Состояния документации jQuery :

  

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

Answer 21

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

Answer 22

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

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

Answer 23

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

Answer 24

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

Answer 25

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

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

или

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

---

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

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

---

Вот a jsFiddle также хорошо.

Answer 26

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

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

Пример здесь

Answer 27

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

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

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

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

Answer 28

Когда вы отметили флажок, как;

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

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

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

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

Answer 29

Вот полный ответ используя 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
    });

Answer 30

В jQuery

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

или

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

В JavaScript

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