快捷導(dǎo)航

用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能

更新時(shí)間：2018年11月15日 09:28:47 作者：站住，別跑

這篇文章主要介紹了用圖片替換checkbox原始樣式并實(shí)現(xiàn)同樣的功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

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)站的支持！

您可能感興趣的文章: