jQuery: Onay kutusunun işaretli OLMADIĞINI test edin

Bunu anlamakta zorlanıyorum. İki onay kutum var (gelecekte daha fazlası olacak):

• checkSurfaceEnvironment-1
• checkSurfaceEnvironment-2

Temel olarak, bir if ifadesi yazmak ve bunlardan birinin kontrol edildiğini ve diğerinin kontrol edilmediğini test etmek istiyorum. Aşağıdakileri gerçekleştirmenin en kolay yolu nedir:

if ( $("#checkSurfaceEnvironment-1").attr('checked', true) &&
     $("#checkSurfaceEnvironment-2").is('**(NOT??)** :checked') ) {
        // do something
}

Güvenilir bir kullanım yolu şudur:

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    //do something
}

Kontrol edilen öğeleri yinelemek istiyorsanız, ana öğeyi kullanın

$("#parentId").find("checkbox").each(function(){
    if ($(this).prop('checked')==true){ 
        //do something
    }
});

Daha fazla bilgi:

Bu iyi çalışır çünkü tüm onay kutularının, onay kutusunun gerçek durumunu saklayan işaretli bir özelliği vardır. Dilerseniz sayfayı inceleyebilir ve bir onay kutusunu işaretleyip işaretini kaldırabilirsiniz ve "işaretli" özelliğinin (varsa) aynı kalacağını fark edeceksiniz. Bu özellik , mevcut durumu değil, yalnızca onay kutusunun ilk durumunu temsil eder . Geçerli durum, bu onay kutusu için dom öğesinin kontrol ettiği özellikte saklanır.

HTML'de Özellikleri ve Nitelikleri Görün

if (!$("#checkSurfaceEnvironment-1").is(":checked")) {
    // do something if the checkbox is NOT checked
}

Ayrıca jQuery .not()yöntemini veya :not()seçiciyi de kullanabilirsiniz :

if ($('#checkSurfaceEnvironment').not(':checked').length) {
    // do stuff for not selected
}

JSFiddle Örneği

ek Notlar

:not() Seçici için jQuery API belgelerinden :

.Not () metodu bir içine karmaşık seçicileri veya değişkenler iterek daha fazla okunabilir seçimleri sunmak sona erecek değildir (): seçici filtre. Çoğu durumda daha iyi bir seçimdir.

Alternatif bir yol:

İşte çalışan bir örnek ve işte kod, ayrıca prop kullanmalısınız.

$('input[type="checkbox"]').mouseenter(function() { 
    if ($(this).is(':checked')) {
        //$(this).prop('checked',false);
        alert("is checked");
    } else {
         //$(this).prop('checked',true);
        alert("not checked");
    }
});​

İşaretli özniteliği değiştirmenin yolunu yorumladım.

if ( $("#checkSurfaceEnvironment-1").is(":checked") && $("#checkSurfaceEnvironment-2").not(":checked") )

Avijendr'in önerdiği gibi daha doğrudan bir uygulama arıyordum.

Sözdizimiyle ilgili biraz sorun yaşadım, ama işe yaradı:

if ($('.user-forms input[id*="chkPrint"]:not(:checked)').length > 0)

Benim durumumda, bir sınıf içeren bir user-formstablom vardı ve dizede checkPrintbulunan onay kutularından herhangi birinin işaretli olup olmadığını kontrol idediyordum.

Bence onay kutusunun işaretli olup olmadığını kontrol etmenin en kolay yolu (jQuery ile):

"işaretliyse":

if ($(this).is(':checked')) {
// I'm checked let's do something
}

"işaretli" DEĞİLSE:

if (!$(this).is(':checked')) {
// I'm NOT checked let's do something
}

Burada bu soru için bir pasajım var.

$(function(){
   $("#buttoncheck").click(function(){
        if($('[type="checkbox"]').is(":checked")){
            $('.checkboxStatus').html("Congratulations! "+$('[type="checkbox"]:checked').length+" checkbox checked");
        }else{
            $('.checkboxStatus').html("Sorry! Checkbox is not checked");
         }
         return false;
   })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>
    <label>
      <input type="checkbox" name="CheckboxGroup1" value="checkbox" id="CheckboxGroup1_0">
      Checkbox</label>
    <br>
    <label>
      <input type="checkbox" name="CheckboxGroup1_" value="checkbox" id="CheckboxGroup1_1">
      Checkbox</label>
    <br>
  </p>
  <p>
    <input type="reset" value="Reset">
    <input type="submit" id="buttoncheck" value="Check">
  </p>
  <p class="checkboxStatus"></p>
</form>

.attr()Yaptığınız gibi yapmak , kontrol edilip edilmediğini görmek için .attr("checked", "checked"), ve eğer değilse.attr("checked") == undefined

Bir div'de tüm onay kutuları işaretlenmişse doğru döndür

function all_checked (id_div){
 all_checked = true;

 $(id_div+' input[type="checkbox"]').each(function() { 
    all_checked = all_checked && $('this').prop('checked');
 }

 return all_checked;
}

Basit ve kolay kontrol edilebilir veya kontrol edilmemiş durum

<input type="checkbox" id="ev-click" name="" value="" >

<script>
    $( "#ev-click" ).click(function() {
        if(this.checked){
            alert('checked');
        }
        if(!this.checked){
            alert('Unchecked');
        }
    });
</script>

bunu dene

if ($("#checkSurfaceEnvironment-1:checked").length>0) {
    //your code in case of NOT checked
}

Yukarıdaki kodda öğeyi kimliğe göre seçip (#checkSurfaceEnvironment-1)ardından filtreye göre kontrol durumunu (:checked)filtreleyin.

Kontrol edilen eleman nesnesinin dizisini döndürecektir. Dizide herhangi bir nesne varsa, o zaman koşul sağlanacaktır.

Durumu kontrol etmenin iki yolu vardır.

if ($("#checkSurfaceEnvironment-1").is(":checked")) {
    // Put your code here if checkbox is checked
}

VEYA bunu da kullanabilirsiniz

if($("#checkSurfaceEnvironment-1").prop('checked') == true){
    // Put your code here if checkbox is checked
}

Umarım bu sizin için yararlıdır.

İşte verilen en basit yol

 <script type="text/javascript">

        $(document).ready(function () {
            $("#chk_selall").change("click", function () {

                if (this.checked)
                {
                    //do something
                }
                if (!this.checked)
                {
                    //do something

                }

            });

        });

    </script>

Bunu kullandım ve benim için çalıştım!

$("checkbox selector").click(function() {
    if($(this).prop('checked')==true){
       do what you need!
    }
});

Bunun zaten yanıtlandığını biliyorum, ancak yine de bunu yapmanın iyi bir yolu:

if ($("#checkbox").is(":checked")==false) {
    //Do stuff here like: $(".span").html("<span>Lorem</span>");
}

if($("#checkbox1").prop('checked') == false){
    alert('checkbox is not checked');
    //do something
}
else
{ 
    alert('checkbox is checked');
}

$("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4").change(function () {
        var item = $("#chkFruits_0,#chkFruits_1,#chkFruits_2,#chkFruits_3,#chkFruits_4");
    if (item.is(":checked")==true) {
        //execute your code here
    }

    else if (item.is(":not(:checked)"))
    {
        //execute your code here
    }

});