日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

國內最全IT社區平臺 聯系我們 | 收藏本站
阿里云優惠2
您當前位置：首頁 > web前端 > jscript > 用JavaScript更改input中radio和checkbox樣式

用JavaScript更改input中radio和checkbox樣式

來源：程序員人生   發布時間：2014-04-07 09:34:49 閱讀次數：2992次

　　隨著前端技術的進步和發展，傳統的表單樣式已經不能滿足需求，由于美觀上的要求，網上現在出現了很多的這種表單美化插件。上網搜了一下，還真的不少，不過都沒怎么用，我不喜歡在網頁的頭部加載一群js，有的網頁頭部這樣的標簽排列很長，很多的js一起加載進來，之間可能會出現bug不說，就是當初更改起來也不是很方便。

　　插件有插件的好處，有它的便捷性。如果為了效率，使用插件值得考慮。如果是為了研究學習，建議還是自己寫比較好。下面寫了一個簡單的radio和checkbox的美化程序。


提示：可修改后代碼再運行!

　　HTML代碼：

單選：
<span><input type="radio" name="sex" value="boy" checked="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>

多選：
<span><input type="checkbox" name="hobby" checked="checked" id="hobby1" /></span><label for="hobby1">xhtml</label>
<span><input type="checkbox" name="hobby" id="hobby2" /></span><label for="hobby2">CSS</label>
<span><input type="checkbox" name="hobby" id="hobby3" /></span><label for="hobby3">Javascript</label>
<span><input type="checkbox" name="hobby" id="hobby4" /></span><label for="hobby4">Flash</label>
<span><input type="checkbox" name="hobby" id="hobby5" /></span><label for="hobby5">Ajax</label>
<span><input type="checkbox" name="hobby" id="hobby6" /></span><label for="hobby6">AS</label>
<span><input type="checkbox" name="hobby" id="hobby7" /></span><label for="hobby7">Flex</label>
<span><input type="checkbox" name="hobby" id="hobby8" /></span><label for="hobby8">PHP/.NET/JSP</label>

Javascript部分代碼：

function radio_style(){
if(gettag("input")){
var r=gettag("input");
function select_element(obj,type){
obj.parentNode.style.background="url(input_style.gif) no-repeat -15px 0px";
if(obj.type=="checkbox"){
obj.parentNode.style.background="url(input_style.gif) no-repeat -15px -15px";
}
if(type){
obj.parentNode.style.background="url(input_style.gif) no-repeat 0px 0px";
if(obj.type=="checkbox"){obj.parentNode.style.background="url(input_style.gif) no-repeat 0px -15px";}
}
}
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)";
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(){
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)}}
}
}
}
}

CSS部分：

.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;}

其實原理很簡單，就是讓input透明度變為0，然后給input添加一個背景，當鼠標選擇的時候，更換其背景為選中狀態即可

稍做了一下改動，可以控制樣式是否加載：


提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生
------分隔線----------------------------

上一篇 JavaScript的FileSystemObject對象寫入文本文件內容

下一篇 Oracle流程分析套件助東方海外擴大SOA效用

分享到:
------分隔線----------------------------
為碼而活
積分：4237
15粉絲
7關注
欄目熱點
關閉
程序員人生
主站蜘蛛池模板： 91av视频网| 亚洲国产免费 | 黄色毛片18 | 成人久久久 | 中文久久| 亚洲日本一区二区三区 | 男女av网站 | 日韩欧美视频在线 | 美女视频黄色免费 | 五月婷婷精品 | 国产精品国产成人国产三级 | 日韩一区av | 欧美国产免费 | 欧美激情精品久久久久久 | 亚洲1234区 | 91精品久久久久久 | 99毛片| 麻豆久久久久 | 欧美一区二区三区成人 | 色网在线播放 | 国产成人精品综合 | 不卡精品视频 | 久久精品国产精品 | 国产精品第 | 久艹av | 狠狠影院| 精品久久久久久久久久中文字幕 | 亚洲国产一区二区三区, | 黑人在线视频 | 黄片毛片免费看 | 精久久| 中文字幕一区二区三区日韩精品 | 亚洲国产精品久久久久 | 亚洲日本va中文字幕久久 | 成人精品一区二区三区校园激情 | 日韩在线免费观看视频 | 欧美日韩色 | 久久国产精品一区二区三区 | 中文字幕在线观看一区二区三区 | 国产精品久久久久久久久久久久久久 | 欧美日韩一区二区三区不卡视频 |