Anda boleh menyesuaikan kotak semak yang cantik dengan mudah tanpa menggunakan terlalu banyak kod dan menggunakan hiperpautan_HTML/Xhtml_Penghasilan halaman web

Hari ini saya tiba-tiba terfikir bahawa kotak semak dalam HTML mempunyai gaya terhad yang boleh diubah, dan membuat kotak semak kini memerlukan menulis banyak kod, dan kemudian saya memikirkan pelaksanaan yang mudah. Terbukti sepenuhnya bahawa ini mungkin. Tidak banyak yang perlu diperkatakan, hanya siarkan kod sumber untuk rujukan anda.

Kesan:

Apabila tidak dipilih: Apabila dipilih:

Latar belakang gambar:

checkboxSel.jpg

checkboxNoSel.jpg

Kod:

coretan kod html:

Salin kod

Kod tersebut adalah seperti berikut:

< ;/ a> Isnin

coretan kod javaScript:

Salin kod

Kod itu seperti berikut:

$("a[name='checkWeek']").klik(function(){
if($(this).hasClass('divCheckBoxSel')){
$( ini).removeClass('divCheckBoxSel'); 🎜>
coretan kod css:

Salin kod

Kod tersebut adalah seperti berikut:

.divCheckBoxNoSel{ background: url("../image/checkboxNoSel.jpg") tiada ulangan tengah; float:left;

lebar:15px; ;

sempadan:1px pepejal #BDBDBD;

warna:#FFF;
}
.divCheckBoxSel{
latar belakang: url("../image/checkboxSel.jpg") tengah;
terapung: kiri;
lebar:15px;
tinggi: 15px; 🎜>
Bezakan setiap satu Hiperpautan tidak dijelaskan dalam banyak cara Malah, butang radio yang serupa juga boleh dilaksanakan dengan mudah dengan cara ini, sekali gus menjimatkan masa.