Soru JQuery ile bir onay kutusu için “işaretli” mi ayarlanıyorsunuz?


Bunu yapmak için böyle bir şey yapmak isterim checkbox kullanma jQuery:

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

veya

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

Böyle bir şey var mı?


3606
2018-01-08 22:20


Menşei


Daha spesifik (ve çok yararlı!) Bir soru, "Bir onay kutusunu BY VALUE olarak bir öğede nasıl kontrol ederim?", Bence burada da tartışabiliriz ve aşağıda bir cevap gönderdim. - Peter Krauss
Burada jQuery'yi kullanarak yapmanın diğer yollarını kontrol edin stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
Eğer tetiklenen onchange olayına ihtiyacınız varsa, $("#mycheckbox").click(); - HumanInDisguise
"Bir şey kontrol etmek" test etmeyi önerir, bu yüzden "onay kutusu işaretli" yapmak daha net ve daha iyi bir başlıktır. - Alireza
) (Prop; fonksiyon mükemmel cevaptır. İşlev tanımına bakın - api.jquery.com/prop - yogihosting


Cevaplar:


jQuery 1,6 +

Yeni kullanın .prop() yöntem:

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

jQuery 1.5.x ve altı

.prop() yöntem mevcut değil, bu yüzden kullanmanız gerekiyor .attr().

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

Bunun olduğunu unutmayın sürüm 1.6'dan önce jQuery'nin birim testleri tarafından kullanılan yaklaşım ve kullanmak tercih edilir

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

İkincisi, kutu ilk olarak kontrol edildiyse, bir aramanın davranışını değiştirmek .reset() Onu içeren herhangi bir formda - ince ama muhtemelen istenmeyen bir davranış değişikliği.

Daha fazla bağlam için, ele alınmadaki değişikliklerin bazı eksik tartışmaları checked 1.5.x'den 1.6'ya geçişte özellik / özellik bulunabilir. sürüm 1.6 sürüm notları ve Özellikler ve Özellikler bölümü .prop() belgeleme.

JQuery'nin herhangi bir sürümü

Sadece bir öğe ile çalışıyorsanız, yalnızca HTMLInputElement'ler .checked özelliği:

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

Kullanmanın yararı .prop() ve .attr() Bunun yerine, tüm eşleşmiş elemanlar üzerinde çalışacakları yöntemlerdir.


5409
2018-01-08 22:25



Kontrol edilen özniteliği kaldırarak @Xian, formu sıfırlamak imkansız hale getirir - mcgrailm
Bir yan not olarak, jQuery 1.6.1 bahsettiğim sorunu düzeltmeli, dolayısıyla hepimiz hala $ (...) prop (...) kullanarak geri dönüyoruz - cwharris
"Eğer sadece bir elemanla çalışıyorsanız, kullanmak her zaman hızlı olacaktır. DOMElement.checked = true". Ancak ihmal edilebilir, çünkü sadece bir element ... - Tyler Crompton
Tyler'ın dediği gibi, performansta göz ardı edilebilir bir gelişme. Bana göre, ortak bir API kullanarak kodlama, yerel API ve jQuery API'lerini karıştırmaktan daha okunabilir olmasını sağlar. JQuery ile yapışırdım. - Charlie Kilian
@TylerCrompton - Tabii ki, tamamen performansla ilgili değil, ama $(element).prop('checked') Yazmanın tam bir kaybıdır. element.checked var ve zaten sahip olduğunuz durumlarda kullanılmalıdır element - gnarf


kullanın:

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

Bir onay kutusunun işaretli olup olmadığını kontrol etmek isterseniz:

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

624
2018-01-08 22:25



ayrıca $ (selector). kontrol etmek için kontrol edilir - eomeroff
Bu tam kodu denedim ve hepsini kontrol et ve işaretlemenin yanı sıra durumlarını kontrol etmeyi seçen bir tümünü seç / yok hiçbiri onay kutusu söz konusu olmadı. Bunun yerine, Christopher Harris'in cevabını denedim ve bu hile yaptı. - JD Smith
Neden sadece "#mycheckbox" yerine "form # mycheckbox" kullanıyorsunuz? Kimlik, tüm belgede zaten benzersizdir, doğrudan almak için daha hızlı ve daha basittir. - YuriAlbuquerque
@YuriAlbuquerque bu bir örnekti. İstediğiniz herhangi bir seçici kullanabilirsiniz. - bchhun
$ (selector) .checked çalışmıyor. JQuery'de 'kontrol' yöntemi yoktur. - Brendan Byrd


Bu, platformlar arası standart olduğu için jQuery ile onay kutularının işaretlenmesi ve işaretlerinin kaldırılması için doğru yoldur. irade form repostlarına izin ver.

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

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

Bunu yaparak, onay kutularını işaretlemek ve işaretini kaldırmak için JavaScript standartlarını kullanıyorsunuz, böylece onay kutusu öğesinin "işaretli" özelliğini düzgün bir şekilde uygulayan herhangi bir tarayıcı bu kodu kusursuz bir şekilde çalıştıracaktır. Bu meli Tüm önemli tarayıcılar olabilir, ancak daha önce Internet Explorer 9'a test edemiyorum.

Sorun (jQuery 1.6):

Bir kullanıcı bir onay kutusunu tıkladığında, bu onay kutusu "işaretli" özellik değişikliklerine yanıt vermeyi durdurur.

İşte birileri sonra işi yapmak için başarısız olan onay kutusu özniteliğinin bir örneği tıklandığında onay kutusu (bu Chrome'da gerçekleşir).

Keman

Çözüm:

JavaScript’in "işaretli" özelliğini kullanarak DOM elementleri, DOM'u manipüle etmeye çalışmak yerine, problemi doğrudan çözebiliriz. istemek bunu yapmak.

Keman

Bu eklenti, jQuery tarafından seçilen herhangi bir öğenin kontrol edilen özelliğini değiştirir ve her koşulda onay kutularını işaretleyip işaretini kaldırır. Dolayısıyla, bu, aşırı bir çözüm gibi gözükse de, sitenizin kullanıcı deneyimini daha iyi hale getirecek ve kullanıcı hayal kırıklığını önlemeye yardımcı olacaktır.

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

Alternatif olarak, bir eklenti kullanmak istemiyorsanız, aşağıdaki kod parçacıklarını kullanabilirsiniz:

// Check
$(':checkbox').prop('checked', true);

// Un-check
$(':checkbox').prop('checked', false);

// Toggle
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

284
2018-05-06 19:31



İlk JSFiddle örneğinizde kullanmalısınız removeAttr('checked') ziyade attr('checked', false) - Daniel X Moore
@DanielXMoore, Sorunun etrafından kayıyorsunuz. Örnek, onay kutusu kullanıcı tarafından tıklandığında, tarayıcının artık yanıt vermediğini göstermekti. checkedözellik değişiklikleri ne olursa olsun Bunları değiştirmek için kullanılan yöntem. - cwharris
@ChristopherHarris Tamam, haklısın, bunu özledim. JQuery 1.6'dan itibaren .prop yöntemini kullanmamalısınız?$('.myCheckBox').prop('checked', true) Bu şekilde otomatik olarak eşleştirilen öğelerin tüm kümesine uygulanacaktır (yalnızca ayarlama yapıldığında, yalnızca ilk alma) - Daniel X Moore
Evet. prop kesinlikle bir öğe üzerinde öznitelikleri ayarlamak için uygun bir yoldur. - cwharris
Güzel küçük eklenti, teşekkürler! Zincirlenebilirliği korumak için, eklentinin sonundan hemen önce "bunu iade et" seçeneğini ekleyin. - JD Smith


Yapabilirsin

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

veya

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

Ateş etmek istediğiniz onay kutusu için onclick etkinliğinde özel kodunuz varsa, bunun yerine şunu kullanın:

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

Özelliği tamamen kaldırarak işaretini kaldırabilirsiniz:

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

Bunun gibi tüm onay kutularını kontrol edebilirsiniz:

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

130
2018-01-08 22:24



Ayrıca, her bir (...); $ ("# myTable giriş: onay kutusu") da gidebilirsiniz. - Chris Brandsma
Sen de gidebilirsin $(".myCheckbox").click() - RobertPitt
@Michah, işaretli özniteliği kaldırarak formu sıfırlamak imkansız hale getirir - mcgrailm
Bu cevap güncel değil çünkü kullanıyor .attr yerine .prop. - Blazemonger
$("#mycheckbox").click(); Ben de etkinlik değiştirmek için dinlerken benim için çalıştı ve .attr & .prop değişiklik olayını ateşlemedi. - Damodar Bashyal


$ .Fn nesnesini yeni yöntemlerle de genişletebilirsiniz:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

O zaman sadece yapabilirsin:

$(":checkbox").check();
$(":checkbox").uncheck();

Ya da bu isimleri kullanan başka bir kütüphaneyi kullanmanız halinde, onlara mycheck () ve myuncheck () gibi daha benzersiz isimler vermek isteyebilirsiniz.


67
2017-08-20 18:19



@ livfree75 işaretli özniteliğin kaldırılması, formun sıfırlanmasını imkansız hale getirir - mcgrailm
Bu cevap güncel değil çünkü kullanıyor .attr yerine .prop. - Blazemonger


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

Sonuncusu, onay kutusu için tıklama etkinliğini tetikleyecek, diğerleri olmayacak. Bu nedenle, ateş etmek istediğiniz onay kutusu için onclick etkinliğinde özel kodunuz varsa, sonuncuyu kullanın.


58
2018-01-08 22:36



bir tane başarısız olur ... işaretli bir jquery nesne üyesi değil - redsquare
Bu cevap güncel değil çünkü kullanıyor .attr yerine .prop. - Blazemonger


Kullanmanız gereken bir onay kutusunu işaretlemek için

 $('.myCheckbox').attr('checked',true);

veya

 $('.myCheckbox').attr('checked','checked');

ve onay kutusunun işaretini kaldırmak için her zaman yanlış olarak ayarlamanız gerekir:

 $('.myCheckbox').attr('checked',false);

Yaparsan

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

özniteliği birlikte bütünüyle kaldırır ve bu nedenle formu sıfırlayamazsınız.

KÖTÜ DEMO jQuery 1.6. Sanırım bu kırık. 1.6 için bunun üzerine yeni bir yazı yapacağım.

YENİ ÇALIŞMA DEMO jQuery 1.5.2 Chrome'da çalışır.

Her iki demo kullanımı

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

56
2018-03-23 15:22



Bu yanlış. 'checked' özniteliğini '' olarak ayarlamak değil En az kromda onay kutularının işaretini kaldırın. - cwharris
@xixonia Test etmeden önce test ettim keman işe yaramaz çünkü jquery içerecek şekilde soldaki menüyü değiştirmediniz - mcgrailm
mcgralim - 1.6'da daha da kolay .... $(".mycheckbox").prop("checked", true/false) - gnarf
@MarkAmery, gönderimimin gönderildiği sırada hiçbir şey eklemediğini, ancak bu durumun doğru olduğunu belirttiniz. Kabul edilen cevabın geçmişine bakarsanız, öğeyi kaldırmanızı öneririz. Bu formu sıfırlamayı imkansız kılıyor, bu yüzden başlamak için gönderildim. - mcgrailm
@mcgrailm İleriye gittim ve kabul ettiğin cevabı açıklamaların ışığında değiştirdim. Göz atmak ve mevcut durumda iyi görünüp görünmediğini kontrol etmek isterseniz bunu takdir ediyorum. Özür dilerim, en azından kısmen yanlış yönlendirilmiş olan keskin eleştiriler sunmak için. - Mark Amery