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




jquery установить radio (24)

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

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

или же

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

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


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

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

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

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

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


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

Для большего контекста некоторые неполные обсуждения изменений обработки обработанного атрибута / свойства при переходе от 1.5.x до 1.6 можно найти в примечаниях к выпуску версии 1.6 и в разделе « Атрибуты и свойства » .prop() документация .

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

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

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

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


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

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

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


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

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

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

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

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

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

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

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

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

Fiddle

Решение:

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

Fiddle

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

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

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

Пример здесь


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

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

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

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

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

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

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

или же

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

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

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

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

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

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

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

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

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

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

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


Помните об утечках памяти в Internet Explorer до Internet Explorer 9 , поскольку в api.jquery.com/prop :

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


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

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

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


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

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

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

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

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

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

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('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>


В jQuery,

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

или же

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

В JavaScript,

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

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

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

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

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

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

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

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

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

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





checked