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

checkedBir onay kutusunun özelliğini kontrol etmek ve jQuery kullanarak işaretli özelliğe dayalı bir eylem gerçekleştirmek gerekiyor.

Örneğin, yaş onay kutusu işaretliyse, yaş girmek için bir metin kutusu göstermem gerekir, aksi takdirde metin kutusunu gizleyin.

Ancak aşağıdaki kod falsevarsayılan olarak döndürülür :

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

<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 selected
</div>

checkedÖzelliği başarıyla nasıl sorgularım ?

İşaretli mülkü nasıl başarılı bir şekilde sorgulayabilirim?

checkedBir onay kutusu DOM öğesinin özelliği size verecektir checkedelemanın durumunu.

Mevcut kodunuz göz önüne alındığında, bunu yapabilirsiniz:

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

Ancak, bunu yapmanın çok daha güzel bir yolu 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>

JQuery's is () işlevini kullanın :

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

JQuery> 1.6'yı kullanma

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

jQuery 1.6+

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

jQuery 1.5 ve altı

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

Herhangi bir jQuery sürümü

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

Tüm kredi gider Xian .

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

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

Not: Onay kutusu işaretlenirse, aksi takdirde tanımsız olarak true değerini döndürür, bu nedenle "TRUE" değerini daha iyi kontrol edin.

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

JQuery 1.6'dan beri, davranışı jQuery.attr()değişti ve kullanıcıların bir öğenin denetlenen durumunu almak için kullanmamaları önerilir. Bunun yerine şunları 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")

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

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

isAgeSelectedKontrolün kimliği nerede .

Ayrıca, @ karim79'un yanıtı iyi çalışıyor. Test ettiğim zaman neyi kaçırdığımdan emin değilim.

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

Jquery'nin güncel bir sürümünü kullanıyorsanız .prop, sorununuzu çözmek için bir yöntem kullanmanız gerekir :

$('#isAgeSelected').prop('checked')trueişaretlenirse ve falseişaretlenmezse geri döner . Bunu doğruladım ve daha önce bu sorunla karşılaştım. $('#isAgeSelected').attr('checked')ve bu durum için değerli bir cevap olmayan $('#isAgeSelected').is('checked')geri dönüyor undefined. Bu yüzden aşağıda verilenleri yapın.

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

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

ClickOlay , olay işleyicisinin checkedyürütülmesi sırasında değişebileceğinden , onay kutusu özelliği için olay işleyicisini kullanmak güvenilmezdir !

İdeal olarak, kodunuzu change, onay kutusunun değeri her değiştiğinde ( nasıl yapıldığından bağımsız olarak) tetiklendiği gibi bir olay işleyicisine koymak istersiniz .

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

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

kullanın:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Bu, gerekli eylemin yalnızca onay işaretini kaldırdığınız zaman değil, kutuyu işaretlediğinizde gerçekleştirilmesini istiyorsanız yardımcı olabilir.

Aynı şeyi jQuery olmadan nasıl yapacağınıza dair bir cevap vermeye karar verdim. Sadece 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;
};

İlk önce her iki öğeyi de kimliklerine göre alırsınız. Daha sonra onay kutusunun onchangeetkinliğine, onay kutusunun işaretli olup olmadığını kontrol eden ve hiddenyaş metin alanının özelliğini uygun şekilde ayarlayan bir işlev atarsınız . Üçlü operatör kullanarak bu örnekte.

İşte test etmeniz için bir keman .

ek

Çapraz tarayıcı uyumluluğu bir sorunsa, CSS displayözelliğini none ve inline olarak ayarlamayı öneriyorum .

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

Daha yavaş ancak tarayıcılar arası uyumlu.

Bunu yapabileceğine inanıyorum:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

Ben de aynı sorunla karşılaştım. ASP.NET onay kutum var

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

JQuery kodunda, onay kutusunun işaretli olup olmadığını kontrol etmek için aşağıdaki seçiciyi kullandım ve bir cazibe gibi çalışıyor gibi görünüyor.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

CssClass yerine kimliği de kullanabileceğinize eminim,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Umarım bu sana yardımcı olur.

Bir onay kutusunun işaretli olup olmadığını kontrol etmenin birçok yolu vardır:

JQuery kullanarak kontrol etmenin yolu

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Örneği veya belgeyi kontrol edin:

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

Bu kod size yardımcı olacaktır

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

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

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

Bu aynı şeyi yapmak için farklı bir yöntemdir:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Bunu kullan:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Onay kutusu işaretliyse uzunluk sıfırdan büyük.

Bunu yapmanın yolu:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

trueGiriş kontrol falseedilirse ve kontrol edilmezse geri döner .

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

Kullanabilirsiniz:

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

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

İkisi de çalışmalı.

1) HTML işaretlemeniz:

<input type="checkbox"  />

kullanılan attr:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Prop kullanılıyorsa:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) HTML işaretlemeniz:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

kullanılan attr:

$(element).attr("checked") // Will return checked whether it is checked="true"

Kullanılan pervane:

$(element).prop("checked") // Will return true whether checked="checked"

Bu örnek düğme içindir.

Takip etmeyi dene:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

En iyi cevap benim için yapmadı. Bu yine de yaptı:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

Temel olarak # li_13 öğesi tıklandığında, # agree (onay kutusudur) öğesinin işlev kullanılarak kontrol edilip edilmediğini kontrol eder .attr('checked'). Daha sonra, #saveForm öğesinde fade ve fade değilse saveForm öğesini kapatın.

Bunu kullanıyorum:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Eğer sorun için bir JavaScript çözüm önerdi olmasına rağmen (a görüntüleyen textboxbir zaman checkboxolduğu checked), bu sorun çözülebilir sadece css ile . Bu yaklaşımla formunuz JavaScript'i devre dışı bırakmış kullanıcılar için çalışır.

Aşağıdaki HTML’ye sahip olduğunuzu varsayarsak:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

İstenilen işlevselliği elde etmek için aşağıdaki CSS'yi kullanabilirsiniz:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Diğer senaryolar için uygun CSS seçicileri düşünebilirsiniz.

İşte bu yaklaşımı göstermek için bir Keman .

Geçiş: 0/1 veya başka

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

Bence basit olacak

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