Soru JQuery'de bir onay kutusunun işaretli olup olmadığını nasıl kontrol edebilirim?


Kontrol etmeliyim checked bir onay kutusunun özelliği ve jQuery'yi kullanarak işaretli mülke dayalı bir eylem gerçekleştirin.

Örneğin, yaş onay kutusu işaretliyse, yaşı girmek için bir metin kutusu göstermem gerekiyor, metin kutusunu gizlemek gerekiyor.

Ancak aşağıdaki kod döner false varsayılan olarak:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

Nasıl başarılı bir şekilde sorgularım checked mülkiyet?


3921


Menşei


Bunu jQuery'yi kullanarak yapmanın başka yollarını kontrol edin stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
$('#isAgeSelected').change(function(){ alert($('#chkSelect').attr('checked')); }); - Khaled.K
$ ('# isAgeSelected') koleksiyonu döndürür, yerine şunu girin: $ ('# isAgeSelected') [0]. - zamoldar
neden olmasın $('#isAgeSelected').checked - mmcrae
JQuery seçicileri dizi döndürdüğünden, kullanabilirsiniz $('#isAgeSelected')[0].checked - Felipe Leão


Cevaplar:


Kontrol edilen mülkü başarıyla nasıl sorgularım?

checked Bir onay kutusu özelliği DOM öğesi size verecektir checked elemanın durumu.

Mevcut kodunuzu dikkate alarak, bunu yapabilirsiniz:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Ancak, bunu yapmak için daha güzel bir yol var. toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>


3102



Yukarıdaki koşulu da denedim, ancak sadece false döndürüyor - Prasad
. $ ( "# TxtAge") (this.checked) Açık hale getirin; Tam olarak aynı $ ("# txtAge") ile aynıdır. Bu nedenle, bir sebepten dolayı durum kontrol edilir ve bir sonraki div gizlenir (tarayıcınızda geri düğmesine tıkladınız) - beklendiği gibi çalışmayacaktır. - Maksim Vi.
@Chiramisu - Eğer cevabı sonuna kadar okuduysanız, yaptığım düzenlemenin is(':checked') iş. - karim79
ayarlamak için: $ ("# chkmyElement") [0] .checked = true; almak için: if ($ ("# chkmyElement") [0] .checked) - JJ_Coder4Hire
Bu sorunun cevabı değil. this.checked OP istediği gibi jQuery değil. Ayrıca, kullanıcı yalnızca sorgunun bir parçası olmayan onay kutusunu tıkladığında çalışır. Soru yine, How to check whether a checkbox is checked in jQuery? Herhangi bir zamanda, onay kutusunu tıklatmadan veya tıklamadan ve jQuery'de. - Marc Compte


JQuery’yi kullan () Olduğu fonksiyon:

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

1550



Süreye, harekete geçme vb. İhtiyacınız yoksa kullanabilirsiniz. $("#txtAge").toggle($("#isAgeSelected").is(':checked')) - naor
+1, kontrol edilen mülk edinmenin farklı yolları vardır. Bazıları burada listeleniyor - user3199690
@NickG Aslında jQuery yapar sahip olmak : görünür seçici - hvdd
@hvdd biliyorum - seçici değil, "özellik" dedim. - NickG
@NickG ... Ne demek istediğini anlamadım. jQuery yok .visible "özellik" (özellik? Diyorsun ki yöntem?) Çünkü HTML öğesinin hiçbiri gözle görülür özelliği. Onlar bir .. sahip display  stil özelliği ve açık / kapalı olmaktan biraz daha karmaşık. - xDaizu


JQuery'yi Kullanma> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Yeni özellik yöntemini kullanarak:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

473



Bunun neden olduğunu bilmek isterdim Cevabı değil ... jquery kullanıyorsan, o zaman .prop yöntem tasarlanmış sahne kontrol etmek için bir yol. .. ... eğer yapacaksan .is(":checked") yaklaşım, bu iyi, ama jquery kullanarak bunu yapmak için tasarlanmış bir şekilde değil. sağ? - dsdsdsdsd
@dsdsdsdsd muhtemelen başka bir geriye dönük uyumluluk adımına ihtiyaç duyduğu için (şu anda aynı sorunla karşı karşıyayım). - user98085
.is(":checked") ve .prop("checked") jQuery'de aynı sonucu elde etmek için geçerli iki yol vardır .is tüm versiyonlarda çalışacak, .prop 1.6+ gerektirir - gnarf
Eğer kullanırsan .attr('checked') jQuery 1.11.3'te, undefined olsun, nerede kullanırsanız .prop('checked')Doğru / yanlış olsun. Eski tarayıcılar, daha sonraki jQuery sürümlerini desteklemediğinde neden bu şekilde çalıştıklarını anlamıyorum. .prop() ve bu yüzden ihtiyaç var .attr(). Tek tasarruf zarafeti, eski tarayıcıların (yani IE 8) herhangi bir şeyi destekleyememesidir: jQuery 1.9. Umarım bunu yapmadılar .attr('checked') Bu versiyonda = undefined)! Neyse ki, her zaman this.checked. - vapcguy


jQuery 1,6 +

$('#isAgeSelected').prop('checked')

jQuery 1.5 ve aşağısı

$('#isAgeSelected').attr('checked')

JQuery'nin herhangi bir sürümü

// Assuming an event handler on a checkbox
if (this.checked)

Tüm kredi geçer Xian.


177



Teknik olarak, this.checked düz Javascript kullanıyor. Ama çapraz-jQuery versiyonu cevabı seviyorum! - vapcguy


Bunu kullanıyorum ve bu kesinlikle iyi çalışıyor:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Not: Onay kutusu işaretliyse, aksi halde doğrulanmamış olarak döner, bu nedenle "DOĞRU" değerini kontrol edin.


148



Bu çalışır çünkü $ ("# checkkBoxId"). Attr ("checked") "checked" veya "" (boş string) döndürür. Ve boş bir dize, sahte, boş olmayan dize gerçektir, doğruluk / falsi değerler hakkında bakın docs.nodejitsu.com/articles/javascript-conventions/... - Adrien Be
Jquery 2.1.x tarafından varsayılan olarak işaretlenmişse her zaman kontrol edilir ... Bu davranışın kasıtlı olup olmadığını bilmiyorum, ama kesinlikle işe yaramıyor (sanırım bir hata) ... val () ya çalışmıyor, "açık" kalır. Prop () düzgün çalışıyor ve dom.edeler de çalışıyor. - inf3rno
Ve sorun, daha eski tarayıcıları desteklemeniz gerektiğinde ortaya çıkıyor .attr()! Eğer sadece yeterince yalnız kaldıysa .... Burada başka bir cevap buldum. this.checked çapraz jQuery çözümü için, sadece temel olarak Javascript. - vapcguy


kullanın:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned


115





JQuery 1.6'dan beri, davranış jQuery.attr() değişti ve kullanıcılar bir öğenin kontrol edilen durumunu almak için kullanmamaları için teşvik ediliyor. Bunun yerine kullanmalısınız jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Diğer iki olasılık:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

105



herhangi bir nedenden dolayı, prop ("kontrol edildi") benim için çalıştı, ancak değil (': kontrol edildi) - BraveNewMath
ve $ ("# txtAge") [0] .checked - Yevgeniy Afanasyev


Bu benim için çalıştı:

$get("isAgeSelected ").checked == true

Nerede isAgeSelected kontrolün kimliği.

Ayrıca, @ karim79's Cevap iyi çalışıyor. Test ettiğimde ne kaçırdığımı bilmiyorum.

Not, bu cevap jQuery değil, Microsoft Ajax kullanır


82





Eğer jquery'nin güncellenmiş bir sürümünü kullanıyorsanız, bunun için gitmelisiniz .prop Sorununuzu çözme yöntemi:

$('#isAgeSelected').prop('checked') dönecek true eğer kontrol edilirse false işaretlenmemişse. Doğruladım ve bu konuya daha önce geldim. $('#isAgeSelected').attr('checked') ve $('#isAgeSelected').is('checked') geri geliyor undefined Bu durum için layık bir cevap değil. Aşağıda verileni yapın.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Umarım yardımcı olur:) - Teşekkürler.


79



neden olmasın $('#isAgeSelected').checked ? - mmcrae
kullanmak için bir kolon $ gerekir ('# isAgeSelected'). (': kontrol edildi') - Patrick


Kullanmak Click onay kutusu özelliği için olay işleyicisi güvenilmezdir checked özellik olay işleyicisinin kendisi yürütülürken değişebilir!

İdeal olarak, kodunuzu bir change olay işleyicisi gibi her zaman onay kutusu onaylanır (bağımsız Nasıl bitti).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

54



JQuery 1.7'den itibaren .on() yöntem, olay işleyicilerinin bir belgeye eklenmesi için tercih edilen yöntemdir. - naor


JQuery olmadan aynı şeyi nasıl yapacağına dair bir cevap vermeye karar verdim. Sadece bir asi olduğum için.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Öncelikle her iki öğeyi de kimlikleriyle edinirsiniz. Sonra onay kutusunu atarsınız onchange olay onay kutusunun işaretli olup olmadığını kontrol eden bir işlev ve hidden yaş metin alanının mülkiyeti uygun şekilde. Bu örnekte üçlü operatörün kullanılması.

Burada bir keman Bunu test etmek için.

ek

Tarayıcılar arası uyumluluk sorunsa, CSS'yi ayarlamayı öneririm display mülk Yok ve Çizgide.

elem.style.display = this.checked ? 'inline' : 'none';

Daha yavaş ama çapraz tarayıcı uyumlu.


49



İyi, .hidden Bu çözümü sevmeme rağmen, çok çapraz tarayıcı değil :) - Florian Margaine
Gerçekten kullanmanın en iyi yolu style. Olsa da, bu talihsiz .hidden performans çok daha iyi. - Florian Margaine
Koşullu bir operatörün içinde tayin? Yasal, evet. Bununla birlikte, iyi bir stil dediğim şey değil. - Jules
basitleştirebilirsiniz: ageInput.hidden =! this.checked; (İnsanların boolean editörlerini gereksiz yere kullandıkları zaman nefret ediyorum ... eğer hem “doğru” hem de “yanlış” ifadesini aynı basit ifadede kullanıyorsanız, muhtemelen kullanmakta da gereksizdir. - JoelFan