Javascript melaksanakan kemahiran atribut_javascript pemilihan kotak semak

Sesiapa yang biasa dengan pembangunan bahagian hadapan web tahu bahawa menilai sama ada kotak semak dipilih adalah sesuatu yang sering dilakukan. Terdapat banyak cara untuk menilai, tetapi keserasian kaedah ini sering diabaikan semasa proses pembangunan. dan kesannya tercapai. Saya pernah menggunakan banyak kaedah sebagai blogger Saya sering menemui artikel di Google yang tidak baik tentang ini atau itu, dan saya keliru kemudian. Saya kebetulan melihat blog asing hari ini dan berpendapat ia menerangkannya dengan baik. Saya bercadang untuk menterjemahkannya ke dalam bahasa Cina dan menambah beberapa pendapat saya sendiri.

Jika anda terlibat dalam pembangunan web dan terdapat kotak semak dalam halaman web yang anda bangunkan, anda mungkin perlu menentukan sama ada kotak semak dipilih pada masa ini dan kemudian laksanakan beberapa pernyataan bersyarat. Terdapat banyak cara untuk menentukan sama ada kotak semak ditandakan.

Mari kita lihat dahulu cara javascript asli menentukan atribut ini. Dalam JavaScript, selepas anda memilih elemen, anda boleh menentukan dengan mudah sama ada kotak pilihan yang anda pilih disemak melalui atribut yang ditandakan bagi elemen tersebut.

Mari kita lihat contoh Terdapat kotak pilihan pada halaman anda dan kotak pilihan mempunyai id unik, seperti myCheckBox, seperti yang ditunjukkan di bawah:

Salin kod Kod adalah seperti berikut:

Sekarang kita mula-mula memilih elemen ini melalui javascript dan kemudian mendapatkan atributnya yang diperiksa.

Salin kod Kod adalah seperti berikut:

Fungsi semakCheckBox() {
Jika (document.getElementById('myCheckBox').ditanda) {
                     //tukar kepada makluman('Ia Disemak'); jika anda tidak menggunakan konsol
console.log('Its Checked');
         } lain {
console.log('Tidak, ia tidak disemak');
}
}

Seperti yang anda lihat, kami mula-mula memilih elemen mengikut id dan kemudian menentukan atribut yang ditandakan Jika kotak semak dipilih, nilainya adalah benar Jika kotak semak tidak dipilih, nilainya akan menjadi palsu.

Jika anda menggunakan jQuery dan anda tidak mahu menggunakan javascript asli untuk membuat pertimbangan ini, terdapat banyak cara:

Penggunaan ialah(':checked')

Dalam penggunaan ini anda akan menggunakan fungsi is() jQuery. Fungsi fungsi ini adalah untuk menentukan sama ada elemen atau koleksi elemen yang dipilih memenuhi parameter keadaan yang anda hantar ke fungsi Jika syarat dipenuhi, ia akan mengembalikan benar, jika tidak ia mengembalikan palsu.

Jadi untuk menggunakan fungsi ini, kita perlu memilih elemen dan kemudian menyemak nilai pemilih:ditandai Pemilih ini berfungsi untuk kotak pilihan, butang radio dan tag pilih.

[/kod]
$('input[type="button"]').klik(function () {
Jika ($('#myCheckBox').is(':checked')) {
                     //tukar kepada makluman('Ia Disemak'); jika anda tidak menggunakan konsol
console.log('Its Checked');
         } lain {
console.log('Tidak, ia tidak disemak');
}
});
[/kod]

Gunakan prop()

Sebelum jQuery 1.6, fungsi attr() telah digunakan untuk mendapatkan sifat dan sifat unsur, tetapi ia sangat mengelirukan. Jadi selepas jQuery 1.6, fungsi baru prop() digunakan untuk mendapatkan nilai sifat semasa elemen tersebut.

Tetapi sebelum itu, kita perlu memahami dahulu perbezaan antara harta dan sifat. Atribut ialah beberapa nilai atribut yang anda tetapkan untuk teg HTML Ini termasuk kelas dan id yang anda tetapkan untuk teg dan juga nilai awal yang anda tetapkan untuk kotak input. Jika anda tidak menetapkan nilai atribut dalam teg tetapi mendapatkan nilai atribut melalui attr(), undefined akan berlaku. prop() juga digunakan untuk mendapatkan nilai atribut sesuatu elemen, tetapi perbezaan yang jelas daripada attr() ialah walaupun atribut yang anda ingin perolehi tidak ditakrifkan dalam teg html, ia masih boleh mengembalikan atribut semasa yang diperlukan dengan betul nilai.

Mengikut pengesyoran rasmi: sifat dengan dua atribut benar dan palsu, seperti ditandai, dipilih atau dilumpuhkan, gunakan prop(), dan lain-lain menggunakan attr().

Untuk menggambarkan perbezaan antara keduanya secara intuitif, anda boleh menukar nilai kotak input serta-merta selepas halaman dimuatkan Pada masa ini, anda akan mendapati bahawa walaupun nilai kotak input anda berubah, gunakan attr () untuk mendapatkannya Nilai sifat tidak akan berubah apabila teks berubah, tetapi nilai sifat yang diperoleh melalui property() akan berubah apabila kandungan kotak teks berubah.

Lihat contoh, di sini kita mempunyai kotak input dengan set nilai awal dan beberapa set atribut:

Salin kod Kod adalah seperti berikut:

Kemudian dalam kod JQuery kita tulis:

Salin kod Kod adalah seperti berikut:

console.log('Nilai Atribut ialah : ' $('#myTextBox').attr('value'));
console.log('Nilai Harta ialah : ' $('#myTextBox').prop('value'));

Kami akan mendapati bahawa nilai dalam kotak input yang diperolehi melalui prop() sentiasa disegerakkan dengan nilai di dalamnya, manakala nilai dalam kotak input yang diperoleh melalui attr() sentiasa ditetapkan dalam nilai html.

Salin kod Kod adalah seperti berikut:

$('input[type="button"]').klik(function () {
alert('Nilai Atribut ialah : ' $('#myTextBox').attr('value'));
alert('Nilai Harta ialah : ' $('#myTextBox').prop('value'));
});

Gunakan penapis :ditanda

var isChecked = $('#myCheckBox:checked').panjang > Kaedah lain untuk menilai nilai atribut ini ialah menambah penapis: diperiksa semasa memilih elemen, dan kemudian menilai atribut elemen berdasarkan panjang elemen yang diperolehi. Tetapi penggunaan ini tidak disyorkan, kerana apabila anda mempunyai banyak kumpulan kotak pilihan pada halaman anda dan menggunakan pemilih kelas dan bukannya pemilih id, jawapan yang anda dapat mungkin salah.

Salin kod Kod adalah seperti berikut:

$('input[type="button"]').klik(function () {
Jika ($('#myCheckBox:checked').panjang > 0 ) {
//tukarnya kepada alert('Its Checked'); jika anda tidak berfungsi dengan konsol
console.log('Its Checked');
} lain {
console.log('Tidak, ia tidak disemak');
}
});

Kita dapat melihat bahawa kita mempunyai beberapa kaedah untuk mendapatkan atribut terpilih bagi item semak. Inilah yang sering perlu digunakan oleh pembangun web dan keliru apabila memilih cara yang betul untuk menggunakannya.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang yang belajar javascript.

Sila luangkan sedikit masa untuk berkongsi artikel dengan rakan anda atau tinggalkan komen. Kami akan berterima kasih atas sokongan anda!