Pertanyaan Bagaimana cara memeriksa apakah kotak centang dicentang di jQuery?


Saya perlu memeriksa checked milik kotak centang dan melakukan tindakan berdasarkan pada properti yang dicentang menggunakan jQuery.

Misalnya, jika kotak centang usia dicentang, maka saya perlu menunjukkan kotak teks untuk memasukkan usia, yang lain menyembunyikan kotak teks.

Tetapi kode berikut kembali false secara default:

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

Bagaimana saya berhasil melakukan query checked milik?


3914


asal


Jawaban:


Bagaimana cara saya berhasil meminta properti yang dicentang?

Itu checked properti elemen DOM kotak centang akan memberi Anda checked keadaan 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 bagus 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>


3099



Gunakan jQuery aku s() fungsi:

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

1549



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
}

472



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 masuk ke Xian.


177



Saya menggunakan ini dan ini berfungsi baik-baik saja:

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

Catatan: Jika kotak centang dicentang itu akan mengembalikan benar jika tidak terdefinisi, jadi periksa lebih baik untuk nilai "BENAR".


148



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


114



Sejak jQuery 1.6, perilaku jQuery.attr() telah berubah dan pengguna didorong untuk tidak menggunakannya untuk mengambil status yang dicentang elemen. Sebaliknya, Anda harus menggunakannya jQuery.prop():

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

Dua kemungkinan lainnya adalah:

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

105