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



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



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


или



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


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

668   30  

30 ответов:

jQuery 1.6+

использовать новый .prop() способ:

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

jQuery 1.5.X и ниже

The .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 используя свойство JavaScript "checked" на DOM элементы, мы можем решить проблему напрямую, вместо того, чтобы пытаться манипулировать DOM В делать то, что мы хочу это делать.

Скрипка

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

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

как я могу проверить флажок-set ПО ЗНАЧЕНИЮ?

помните, что в типичном наборе флажков все входные теги имеют одно и то же имя, они отличаются по атрибуту 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;
    });
});

обновление: вот тот же блок кода с использованием нового метода 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 без каких-либо ошибок.

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

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

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

$("#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");
}

Comments

    Ничего не найдено.