Periksa apakah kotak centang TIDAK dicentang saat klik - jQuery

87

Saya ingin memeriksa apakah kotak centang baru saja tidak dicentang, ketika pengguna mengkliknya. Alasan untuk ini adalah karena saya ingin melakukan validasi ketika pengguna menghapus centang pada kotak centang. Karena setidaknya satu kotak centang perlu diperiksa. Jadi jika dia tidak mencentang yang terakhir, maka secara otomatis memeriksa dirinya sendiri lagi.

Dengan jQuery saya dapat dengan mudah mengetahui apakah itu dicentang atau tidak:

$('#check1').click(function() {
    if($(this).is(':checked'))
        alert('checked');
    else
        alert('unchecked');
});

Tetapi saya sebenarnya hanya ingin memiliki pernyataan if yang memeriksa apakah kotak centang baru saja tidak dicentang.

Jadi saya pikir saya bisa melakukannya dengan kode berikut:

$('#check2').click(function() {
    if($(this).not(':checked'))
        alert('unchecked');
    else
        alert('checked');
});

Tapi ini akan selalu menampilkan pesan 'tidak dicentang'. Tidak seperti yang saya harapkan ...

demo: http://jsfiddle.net/tVM5H/

Jadi akhirnya saya membutuhkan sesuatu seperti:

$('#check2').click(function() {
    if($(this).not(':checked')) {
        // Got unchecked, so something!!!
    }
});

Tapi jelas ini tidak berhasil. Saya lebih suka tidak ingin menggunakan contoh pertama, karena kemudian saya akan memiliki pernyataan 'else' yang tidak perlu ketika saya hanya membutuhkan satu pernyataan 'jika'.

Jadi hal pertama, apakah ini bug jQuery? Sebab bagi saya itu perilaku yang tidak terduga. Dan kedua, adakah ide untuk alternatif yang baik?

w00
sumber

Jawaban:

165

Coba ini:

if(!$(this).is(':checked'))

demo

antirat
sumber
51

Jawaban yang sudah diposting akan berfungsi. Jika Anda ingin menggunakan jQuery: tidak, Anda dapat melakukan ini:

if ($(this).is(':not(:checked)'))

atau

if ($(this).attr('checked') == false)
chris_code
sumber
Contoh pertama dalam jawaban ini tampaknya paling mudah dibaca dari semua opsi, jadi saya memilihnya.
Toby 1 Kenobi
5
$(document).ready(function() {
        $("#check1").click(function() {
            var checked = $(this).is(':checked');
            if (checked) {
                alert('checked');
            } else {
                alert('unchecked');
            }
        });
    });
Nanhe Kumar
sumber
4

jQuery untuk memeriksa diperiksa? Betulkah?

if(!this.checked) {

Jangan gunakan bazoka untuk melakukan pekerjaan pisau cukur.

TheZ
sumber
4
Jika menggunakan jQuery untuk menemukan elemen, itu harus dibaca$(this)[0].checked
Chris
@HoldOffHunger Ini adalah bagian dari elemen masukan asli: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… Jika Anda menggunakan jQuery maka Chris memiliki sintaks yang benar di komentar di atas milik Anda.
TheZ
@TheZ: Bagus! Ya, Anda benar, jawaban Chris bagus. Saran: Tambahkan ke jawaban dengan kredit? Baik OP dan jawaban teratas condong ke $ (selector) .is ('...'), yang merupakan solusi jQuery murni. Hanya menggunakan yang .checkedmereka miliki .is('checked')tidak akan bekerja dengan sendirinya.
HoldOffHunger
2

Lihat beberapa jawaban untuk pertanyaan ini - saya pikir itu mungkin berlaku untuk Anda:

bagaimana menjalankan fungsi klik setelah perilaku default sebuah elemen

Saya pikir Anda mengalami ketidakkonsistenan dalam implementasi onclickfungsi browser . Beberapa memilih untuk mengaktifkan kotak centang sebelum acara dijalankan dan beberapa setelahnya.

Teman Nathan
sumber
Ini sebenarnya juga sangat penting.
TheZ
Dan itulah mengapa jQuery harus diperiksa. Betulkah. ;)
JoeBrockhaus
1

Jawabannya sudah diposting. Tapi kita juga bisa menggunakan jquery dengan cara ini

demo

$(function(){
    $('#check1').click(function() {
        if($('#check1').attr('checked'))
            alert('checked');
        else
            alert('unchecked');
    });

    $('#check2').click(function() {
        if(!$('#check2').attr('checked'))
            alert('unchecked');
        else
            alert('checked');
    });
});
Praveen04
sumber
0

Lakukan seperti ini

if (typeof $(this).attr("checked") == "undefined" )

// To check if checkbox is checked
if( $(this).attr("checked")=="checked")
Usman Younas
sumber
Ini bisa saja this.checked. Baris pertama tidak perlu typeofada (tidak akan pernah memunculkan a ReferencError). Anda juga harus menggunakan, prop()bukan attr(), yang akan mengembalikan boolean, membuat yang kedua juga berlebihan.
alex