jquery pilih tidak disemak

jQuery ialah salah satu alat yang paling popular dalam JS Ia menyediakan banyak kaedah yang mudah dan mudah digunakan untuk memudahkan kami memproses elemen DOM dalam halaman web. Semasa memproses borang, kita selalunya perlu memilih radio dan elemen kotak semak yang dipilih dalam elemen borang. Walau bagaimanapun, kita kadang-kadang menghadapi situasi sedemikian. Bagaimana untuk memilih elemen yang tidak mempunyai atribut yang diperiksa dalam borang?

Pertama, kita perlu memahami status elemen borang. Untuk butang radio dan kotak semak, mereka mempunyai keadaan yang ditandakan. Status ini boleh benar atau salah Jika ia diperiksa, ia adalah benar, jika tidak ia adalah palsu. Dalam DOM, kita boleh mengaksesnya melalui atribut yang disemak.

Untuk butang radio, hanya satu akan dipilih. Kod HTML berikut ialah elemen borang yang terdiri daripada dua butang radio:

<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女

Dengan mengakses atribut yang ditandakan, kita boleh mencari elemen butang radio yang dipilih:

var selectedRadio = $('input[name="gender"]:checked');

Untuk kotak semak, mereka mungkin Terdapat adalah pelbagai pilihan. Kod HTML berikut ialah elemen bentuk yang terdiri daripada dua kotak semak:

<input type="checkbox" name="interest" value="music" checked>音乐
<input type="checkbox" name="interest" value="sports">运动

Kita boleh mencari elemen kotak semak yang dipilih dengan mengakses atribut yang ditandakan:

var selectedCheckbox = $('input[name="interest"]:checked');

Walau bagaimanapun, jika tiada atribut yang ditandakan , apa yang patut kita buat?

Kaedah 1: Gunakan :has() pseudo-class bagi pemilih

Kita boleh menggunakan :has() pseudo-class bagi pemilih jQuery, yang boleh memilih elemen induk dengan khusus elemen kanak-kanak. Untuk butang radio dan kotak semak yang tidak mempunyai atribut yang disemak, kita boleh menggunakan :not() pseudo-class untuk menapisnya, dan kemudian menggunakan :has() pseudo-class untuk memilih elemen induknya.

Sebagai contoh, kami mempunyai kod HTML berikut:

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

Kita boleh menggunakan kod berikut untuk memilih elemen induk bagi butang radio yang tidak ditanda:

var unselectedRadioParent = $('input[name="gender"]:not(:checked)').parent();

Begitu juga, untuk kotak semak Untuk elemen kotak, kita boleh menggunakan kaedah yang serupa:

var unselectedCheckboxParent = $('input[name="interest"]:not(:checked)').parent();

Perlu diingat bahawa pemilih kelas pseudo :not() adalah lebih intensif prestasi. Oleh itu, adalah disyorkan untuk menggunakan kaedah kedua jika anda mempunyai sejumlah besar butang radio atau elemen kotak semak dalam borang anda.

Kaedah 2: Gunakan kaedah penapis()

Kaedah penapis() digunakan untuk menapis koleksi elemen yang sepadan dengan pemilih atau fungsi tertentu. Kita boleh menggunakan kaedah penapis() untuk menapis semua butang radio yang dipilih atau elemen kotak semak dan kemudian menggunakan kaedah not() untuk menapis elemen lain.

Sebagai contoh, untuk kumpulan butang radio berikut, kita boleh memilih elemen butang radio yang tidak ditanda menggunakan kod berikut:

var unselectedRadio = $('input[name="gender"]').not(':checked');

Begitu juga, untuk kumpulan kotak pilihan berikut, kita boleh menggunakan Kod berikut digunakan untuk memilih elemen kotak pilihan yang tidak ditanda:

var unselectedCheckbox = $('input[name="interest"]').not(':checked');

Ringkasan

Dalam elemen borang, kita selalunya perlu memilih butang radio dan elemen kotak pilihan. Jika tiada atribut yang disemak dalam elemen borang, kita boleh menggunakan kaedah :has() pseudo-class atau filter() bagi pemilih untuk memilih butang radio dan elemen kotak semak yang tidak ditanda. Kaedah ini memberikan kami pilihan yang lebih fleksibel semasa memproses borang, membolehkan kami mengendalikan borang dengan mudah dalam pelbagai situasi.

Atas ialah kandungan terperinci jquery pilih tidak disemak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!