1.結(jié)構(gòu)：
<div class="box1"> <input/> <div class="box2"> <img /> </div></div>
2.css里：
1）設(shè)置圖片的div絕對(duì)定位，調(diào)整讓它與原始input重合。
2）設(shè)置input的寬高與圖片的div一樣大，這樣精確一點(diǎn)。
3）然后設(shè)置input：position:relative；再設(shè)置它的z-index，讓它浮在圖片那個(gè)div的上面。
4）調(diào)整兩個(gè)的位置，讓之重合。
5）設(shè)置input：opacity:0;
3.jq里：
$(function(){ $("input").click(function(){ if(this.checked){ $(this).siblings(".box2").find("img").attr("src","被選中的圖片的src"); }else{ $(this).siblings(".box2").find("img").attr("src","未被選中的圖片的src"); } }) })注意：siblings()里面只能有一個(gè)屬性。不能siblings(".box2>img")，這樣是錯(cuò)的。
radio修改默認(rèn)樣式也是同樣的道理,但是在jq里就要改一些東西了，
如果想點(diǎn)擊第一個(gè)radio之后，再點(diǎn)擊同一個(gè)name的radio，它被選中之后，第一個(gè)radio背景變?yōu)闆](méi)選中，而第二個(gè)radio背景變?yōu)楸贿x中，還用上面的jq里 的代碼是不能實(shí)現(xiàn)的，會(huì)出現(xiàn)第一個(gè)選中之后，再點(diǎn)第二個(gè)會(huì)讓兩個(gè)的背景都是被選中的圖片。
所以要在判定是否被選中的時(shí)候，加上：
$(function(){ $("input").click(function(){ $("input").each(function(){ if(this.checked){ $(this).siblings(".box2").find("img").attr("src","被選中的圖片的src"); }else{ $(this).siblings(".box2").find("img").attr("src","未被選中的圖片的src"); } }) })}) 需要遍歷一下input
補(bǔ)充：
用圖片替換checkbox的樣式
由于項(xiàng)目的需要，需要在登錄的時(shí)候保存用戶名，就需要使用checkbox。其中的checkbox樣式為給定的一張圖片，非選中：
，選中：
開(kāi)始準(zhǔn)備改變checkbox的樣式以達(dá)到目的，結(jié)果無(wú)終而返。因?yàn)閏heckbox的大小，樣式很難改變，反正打不到我想要的效果。于是試圖通過(guò)用圖片替換checkbox的樣式。
主要知識(shí)點(diǎn)：
(1)通過(guò) label 元素內(nèi)點(diǎn)擊圖片，就會(huì)觸發(fā)checkbox控件。就是說(shuō)，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的checkbox控件上。
<input type="checkbox" class="clsCheckBox" ID="chkRememberPwd"/> <label for="chkRememberPwd"><img src="${ctx}/images/more/selector_default.png" width="38" height="38" onclick="checkbox()" /></label> //checkbox通過(guò)css設(shè)置為隱藏.clsCheckBox{ display:none; }（2）點(diǎn)擊圖片時(shí)通過(guò)JS進(jìn)行圖片的切換。代碼如下：
var result = true; function checkbox() { if (result==true) { document.images[0].src = "${ctx}/images/more/selector_focus.png"; result=false; } else if(result==false) { document.images[0].src = "${ctx}/images/more/selector_default.png" result=true; } }登錄頁(yè)面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>用戶登錄</title><script>history.forward();</script><script type="text/javascript"> function func_key(event){ if (event.keyCode == 13){ doLogin(); } } function cleanup(o){ o.value = ""; o.style.textAlign="left"; } var result = true; function checkbox() { if (result==true) { document.images[0].src = "${ctx}/images/more/selector_focus.png"; result=false; } else if(result==false) { document.images[0].src = "${ctx}/images/more/selector_default.png" result=true; } }</script><style type="text/css">.clsCheckBox{ display:none; } </style></head><body ><div id="header"><div id="headInfo"><span>登錄</span></div></div><form><table class="partb" cellspacing="0" cellpadding="0"> <tr class="partba"> <td class="partbb">用戶名</td> <td><input name="userClientNumber" id="userClientNumber" class="partbc" type="text" value="" onfocus="cleanup(this)"/></td> </tr> <tr class="partbe"></tr> <tr class="partba"> <td class="partbb">密碼</td> <td><input name="userPassword" id="userPassword" class="partbc" type="password" value="" onfocus="cleanup(this)" /></td> </tr> </table><table style="width:450px;margin:-20px 15px;padding:0px;" width="480" border="0"> <tr><td><input type="checkbox" class="clsCheckBox" ID="chkRememberPwd"/><label for="chkRememberPwd"><img src="${ctx}/images/more/selector_default.png" width="38" height="38" onclick="checkbox()" /></label><span style="padding-left:15px;font-size:24px;color:#999999;vertical-align:top;line-height:38px;">記住用戶名</span></td> <td style="text-align:right;padding-right:0px;"><a href="modifyPassword!load.action" style="border-bottom: 1px solid #ffa200;"><span style="color:#ffa200;font-size:24px;">找回登錄密碼</span></a></td> </tr></table><table class="partb" style="margin-top:180px;" border="0"> <tr> <td width="240" align="left" ><div class="bottondiv" ><input class="inputbotton" type="button" onclick="javascript:doLogin();" value="登 錄"/></div></td> <td width="240" align="left"><div class="bottondiv" ><input class="inputbotton" type="button" onclick="location='register!loadRegister.action'" value="注 冊(cè)"/></div></td> </tr></table></form></body></html>總結(jié)
以上所述是小編給大家介紹的用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
