Bagaimana saya memeriksa apakah kotak centang dicentang di jQuery?

Saya perlu memeriksa checkedproperti kotak centang dan melakukan tindakan berdasarkan properti yang diperiksa menggunakan jQuery.

Misalnya, jika kotak centang usia dicentang, maka saya perlu menunjukkan kotak teks untuk memasukkan usia, selain itu sembunyikan kotak teks.

Tetapi kode berikut kembali falsesecara default:

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>

Bagaimana cara saya berhasil menanyakan checkedproperti?

Bagaimana cara saya berhasil menanyakan properti yang diperiksa?

The checkedproperti dari elemen kotak centang DOM akan memberikan checkedkeadaan elemen.

Dengan kode yang ada, Anda dapat melakukan ini:

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

Namun, ada cara yang jauh lebih cantik untuk melakukan ini, menggunakan 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>

Gunakan fungsi jQuery's () :

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

Menggunakan jQuery> 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

Menggunakan metode properti baru:

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

jQuery 1.6+

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

jQuery 1.5 dan di bawah

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

Versi jQuery apa pun

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

Semua kredit jatuh ke Xian .

Saya menggunakan ini dan ini berfungsi dengan sangat baik:

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

Catatan: Jika kotak centang dicentang maka akan mengembalikan true jika tidak terdefinisi, jadi lebih baik periksa nilai "TRUE".

Menggunakan:

<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

Sejak jQuery 1.6, perilaku jQuery.attr()telah berubah dan pengguna disarankan untuk tidak menggunakannya untuk mengambil status elemen yang diperiksa. Sebagai gantinya, Anda harus menggunakan jQuery.prop():

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

Dua kemungkinan lain adalah:

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

Ini bekerja untuk saya:

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

Di mana isAgeSelectedid kontrol.

Juga, jawaban @ karim79 berfungsi dengan baik. Saya tidak yakin apa yang saya lewatkan pada saat saya mengujinya.

Catatan, ini adalah jawaban menggunakan Microsoft Ajax, bukan jQuery

Jika Anda menggunakan versi jquery yang diperbarui, Anda harus mencari .propmetode untuk menyelesaikan masalah Anda:

$('#isAgeSelected').prop('checked')akan kembali truejika dicentang dan falsejika tidak dicentang. Saya mengkonfirmasinya dan saya menemukan masalah ini sebelumnya. $('#isAgeSelected').attr('checked')dan $('#isAgeSelected').is('checked')kembali undefinedyang bukan jawaban yang layak untuk situasi ini. Jadi lakukan seperti yang diberikan di bawah ini.

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

Semoga bisa membantu :)) - Terima kasih.

Menggunakan Clickpengendali event untuk properti kotak centang tidak dapat diandalkan, karena checkedproperti dapat berubah selama eksekusi pengendali event itu sendiri!

Idealnya, Anda ingin memasukkan kode Anda ke changeevent handler seperti dipecat setiap kali nilai kotak centang diubah (terlepas dari bagaimana melakukannya).

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

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

Menggunakan:

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

Ini dapat membantu jika Anda ingin tindakan yang diperlukan harus dilakukan hanya ketika Anda menandai kotak tidak pada saat Anda menghapus centang.

Saya memutuskan untuk mengirim jawaban tentang cara melakukan hal yang persis sama tanpa jQuery. Hanya karena aku seorang pemberontak.

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

Pertama, Anda mendapatkan kedua elemen dengan ID mereka. Kemudian Anda menetapkan acara kotak centang onchangefungsi yang memeriksa apakah kotak centang diperiksa dan mengaturhidden properti bidang teks usia secara tepat. Dalam contoh itu menggunakan operator ternary.

Ini biola bagi Anda untuk mengujinya.

Tambahan

Jika kompatibilitas lintas-browser adalah masalah maka saya mengusulkan untuk mengatur displayproperti CSS ke none dan inline .

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

Lebih lambat tapi kompatibel lintas-browser.

Saya yakin Anda bisa melakukan ini:

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

Saya berlari ke masalah yang sama persis. Saya memiliki kotak centang ASP.NET

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

Dalam kode jQuery saya menggunakan pemilih berikut untuk memeriksa apakah kotak centang dicentang atau tidak, dan tampaknya berfungsi seperti pesona.

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

Saya yakin Anda juga bisa menggunakan ID bukan CssClass,

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

Saya harap ini membantu Anda.

Ada banyak cara untuk memeriksa apakah kotak centang dicentang atau tidak:

Cara memeriksa menggunakan jQuery

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

Lihat contoh atau juga dokumentasikan:

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

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

Kode ini akan membantu Anda

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

Ini bekerja untuk saya:

/* isAgeSelected being id for checkbox */

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

Ini adalah beberapa metode berbeda untuk melakukan hal yang sama:

$(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>

Gunakan ini:

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

Panjangnya lebih besar dari nol jika kotak centang dicentang.

Cara saya melakukan ini adalah:

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

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

Ini mengembalikan truejika input dicentang dan falsejika tidak.

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

Kamu bisa menggunakan:

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

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

Keduanya harus bekerja.

1) Jika markup HTML Anda adalah:

<input type="checkbox"  />

attr digunakan:

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

Jika prop digunakan:

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

2) Jika markup HTML Anda adalah:

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

attr digunakan:

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

Prop digunakan:

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

Contoh ini untuk tombol.

Coba yang berikut ini:

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

Jawaban teratas tidak melakukannya untuk saya. Ini melakukan:

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

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

Pada dasarnya ketika elemen # li_13 diklik, ia memeriksa apakah elemen # setuju (yang merupakan kotak centang) diperiksa dengan menggunakan .attr('checked')fungsi. Jika kemudian fadeIn elemen #saveForm, dan jika tidak fadeOut elemen saveForm.

Saya menggunakan ini:

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

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

Meskipun Anda telah mengusulkan solusi JavaScript untuk masalah Anda (menampilkan textboxketika checkboxadalah checked), masalah ini dapat diselesaikan hanya dengan css . Dengan pendekatan ini, formulir Anda berfungsi untuk pengguna yang telah menonaktifkan JavaScript.

Dengan asumsi Anda memiliki HTML berikut:

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

Anda dapat menggunakan CSS berikut untuk mencapai fungsionalitas yang diinginkan:

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

Untuk skenario lain, Anda mungkin memikirkan penyeleksi CSS yang tepat.

Berikut adalah biola untuk menunjukkan pendekatan ini .

Toggle: 0/1 atau yang lain

<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');
    };
});

Saya pikir itu akan menjadi yang sederhana

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