masyarakat Belajar Perpustakaan Alatan Masa lapang

Melayu

Rumah > hujung hadapan web > tutorial js > 利用JavaScript更改input中radio和checkbox样式_表单特效

利用JavaScript更改input中radio和checkbox样式_表单特效

WBOY

Lepaskan： 2016-05-16 18:41:24

asal

905 orang telah melayarinya

本文涉及到的图片

<style type="text/css"> 
body 
{ 
margin: 0px; 
padding: 0px; 
font-size: 13px; 
} 
.input_style 
{ 
padding: 6px 0px; 
width: 600px; 
margin: 0px auto; 
border-bottom: #666666 1px dotted; 
} 
.input_style span 
{ 
display: inline-block; 
width: 15px; 
height: 15px; 
text-align: left; 
vertical-align: middle; 
_overflow: hidden; 
} 
.input_style label 
{ 
padding: 0px 6px; 
cursor: pointer; 
} 
.input_style input 
{ 
cursor: pointer; 
} 
.checkbox 
{ 
padding: 0px; 
list-style: none; 
width: 600px; 
margin: 6px auto; 
height: auto; 
overflow: hidden; 
} 
.checkbox li 
{ 
padding: 3px 0px; 
float: left; 
} 
h4 
{ 
width: 600px; 
margin: 0px auto; 
margin-top: 30px; 
} 
.button 
{ 
width: 600px; 
text-align: center; 
margin: 0px auto; 
} 
</style>

<script language="javascript" type="text/javascript"> 
function getid(id) { return document.getElementById(id); } 
function gettag(tag, obj) { if (obj) { return obj.getElementsByTagName(tag) } else { return document.getElementsByTagName(tag) } } 
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function() { oldonload(); func(); } }; } 
function radio_style() {//3设置样式 
if (gettag("input")) { 
var r = gettag("input"); 
function select_element(obj, type) {//1设置背景图片 
obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px 0px"; 
if (obj.type == "checkbox") { 
obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat -15px -15px"; 
} 
if (type) { 
obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px 0px"; 
if (obj.type == "checkbox") { obj.parentNode.style.background = "url(/upload/2009-11/20091124021750277.gif) no-repeat 0px -15px"; } 
} 
} //1 
for (var i = 0; i < r.length; i++) { 
if (r[i].type == "radio" || r[i].type == "checkbox") { 
r[i].style.opacity = 0; r[i].style.filter = "alpha(opacity=0)";//隐藏真实的checkbox和radio 
r[i].onclick = function() { select_element(this); unfocus(); } 
if (r[i].checked == true) { select_element(r[i]); } else { select_element(r[i], 1); } 
} 
} 
function unfocus() {//2处理未选中 
for (var i = 0; i < r.length; i++) { 
if (r[i].type == "radio" || r[i].type == "checkbox") { if (r[i].checked == false) { select_element(r[i], 1) } } 
} 
} //2 
} 
} //3 
function addevent() { gettag("input", getid("button"))[0].onclick = function() { this.value = "去除样式"; this.onclick = removeevent; radio_style(); }; } 
function removeevent() { 
var r = gettag("input"); 
for (var i = 0; i < r.length; i++) { 
if (r[i].type == "radio" || r[i].type == "checkbox") { 
r[i].style.opacity = 100; r[i].style.filter = "alpha(opacity=100)"; 
r[i].onclick = function() { } 
r[i].parentNode.style.background = "none"; 
} 
} 
gettag("input", getid("button"))[0].value = "加载样式"; 
gettag("input", getid("button"))[0].onclick = function() { this.value = "去除样式"; this.onclick = removeevent; radio_style(); }; 
} 
addLoadEvent(addevent); 
</script>

<title>利用javascript自定义radio及checkbox样式</title> 
 
 
<h4> 
单选框样式：</h4> 
<div class="input_style"> 
<span> 
<input type="radio" name="sex" value="boy" checked id="sex_boy"></span><label for="sex_boy">男</label> 
<span> 
<input type="radio" name="sex" value="girl" id="sex_girl"></span><label for="sex_girl">女</label> 
</div> 
<div class="input_style"> 
<span> 
<input type="radio" name="marry" value="yes" id="marry_yes"></span><label for="marry_yes">boy</label> 
<span> 
<input type="radio" name="marry" value="not" checked id="marry_not"></span><label for="marry_not">girl</label> 
</div> 
<h4> 
复选框样式：</h4> 
<ul class="checkbox input_style"> 
<li>
<span> 
<input type="checkbox" name="hobby" checked id="hobby1"></span><label for="hobby1">xhtml</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby2"></span><label for="hobby2">CSS</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby3"></span><label for="hobby3">Javascript</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby4"></span><label for="hobby4">Flash</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby5"></span><label for="hobby5">Ajax</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby6"></span><label for="hobby6">AS</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby7"></span><label for="hobby7">Flex</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby8"></span><label for="hobby8">PHP/.NET/JSP</label>
</li> 
</ul> 
<ul class="checkbox input_style"> 
<li>
<span> 
<input type="checkbox" name="hobby" checked id="hobby9"></span><label for="hobby9">了解</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby10"></span><label for="hobby10">一般</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby11"></span><label for="hobby11">熟练</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby12"></span><label for="hobby12">精通</label>
</li> 
<li>
<span> 
<input type="checkbox" name="hobby" id="hobby13"></span><label for="hobby13">资深专家</label>
</li> 
</ul> 
<div class="button" id="button"> 
<input type="button" value="加载样式">
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Label berkaitan：

input Radio 样式

sumber：php.cn

Artikel sebelumnya：通过身份证号得到出生日期和性别的js代码_javascript技巧 Artikel seterusnya：javascript 在网页中的运用(asp.net)_javascript技巧

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Apakah itu NullPointerException, dan bagaimana saya membetulkannya?

2024-10-22 09:46:29
Daripada Novis kepada Coder: Perjalanan Anda Bermula dengan Asas C

2024-10-13 13:53:41
Membuka Kunci Pembangunan Web dengan PHP: Panduan Pemula

2024-10-12 12:15:51
Demystifying C: Laluan Yang Jelas dan Mudah untuk Pengaturcara Baharu

2024-10-11 22:47:31
Buka Potensi Pengekodan Anda: Pengaturcaraan C untuk Pemula Mutlak

2024-10-11 19:36:51
Lepaskan Pengaturcara Dalaman Anda: C untuk Pemula Mutlak

2024-10-11 15:50:41
Automasi Kehidupan Anda dengan C: Skrip dan Alat untuk Pemula

2024-10-11 15:07:41
PHP Dipermudahkan: Langkah Pertama Anda dalam Pembangunan Web

2024-10-11 14:21:21
Bina Apa sahaja dengan Python: Panduan Pemula untuk Melancarkan Kreativiti Anda

2024-10-11 12:59:11
Kunci Pengekodan: Membuka Kunci Kuasa Python untuk Pemula

2024-10-11 12:17:31

Isu terkini

Tidak dapat mendapatkan elemen input daripada tapak web Jadi saya cuba mendapatkan elemen input daripada Twitter tetapi apabila saya menjalankanny...

daripada 2024-04-06 18:59:57

0

1

442

Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...

daripada 2024-04-06 15:35:24

0

1

274

Paparkan tatasusunan objek bersarang dalam jadual HTML dengan mengulang Saya mempunyai input berikut yang mengandungi pelbagai objek bersarang. summary ialah tata...

daripada 2024-04-05 14:11:42

0

1

1373

Biarkan React memberikan teg penutup input? Saya mempunyai permintaan yang luar biasa. Tapak web saya dibina menggunakan React dan say...

daripada 2024-04-03 23:01:01

0

1

320

Pemalam Shopware 6: Cara mengalih keluar konfigurasi boolean dan memindahkannya ke konfigurasi berbilang pilih Saya mempunyai pemalam Shopware6 yang pada masa ini dikonfigurasikan dengan nilai ulasanSk...

daripada 2024-04-03 23:09:28

0

1

410

Topik-topik yang berkaitan

Lagi>

Cadangan popular

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Muat turun terkini

Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan