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

1.結(jié)構(gòu)：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、阜新網(wǎng)站維護、網(wǎng)站推廣。

<div class="box1">
　　<input/>
　　<div class="box2">
　　　　<img />
　　</div>
</div>

2.css里：

1）設(shè)置圖片的div絕對定位，調(diào)整讓它與原始input重合。

2）設(shè)置input的寬高與圖片的div一樣大，這樣精確一點。

3）然后設(shè)置input：position:relative；再設(shè)置它的z-index，讓它浮在圖片那個div的上面。

4）調(diào)整兩個的位置，讓之重合。

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()里面只能有一個屬性。不能siblings(".box2>img")，這樣是錯的。

radio修改默認樣式也是同樣的道理,但是在jq里就要改一些東西了，

如果想點擊第一個radio之后，再點擊同一個name的radio，它被選中之后，第一個radio背景變?yōu)闆]選中，而第二個radio背景變?yōu)楸贿x中，還用上面的jq里的代碼是不能實現(xiàn)的，會出現(xiàn)第一個選中之后，再點第二個會讓兩個的背景都是被選中的圖片。

所以要在判定是否被選中的時候，加上：

$(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

補充：

用圖片替換checkbox的樣式

由于項目的需要，需要在登錄的時候保存用戶名，就需要使用checkbox。其中的checkbox樣式為給定的一張圖片，非選中：

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

，選中：

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

開始準備改變checkbox的樣式以達到目的，結(jié)果無終而返。因為checkbox的大小，樣式很難改變，反正打不到我想要的效果。于是試圖通過用圖片替換checkbox的樣式。

主要知識點：

(1)通過 label 元素內(nèi)點擊圖片，就會觸發(fā)checkbox控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(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通過css設(shè)置為隱藏
.clsCheckBox{ 
 display:none; 
 }

（2）點擊圖片時通過JS進行圖片的切換。代碼如下：

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

登錄頁面代碼：

<!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  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 >記住用戶名</span></td>
 <td ><a href="modifyPassword!load.action" ><span >找回登錄密碼</span></a></td>
 </tr>
</table>
<table class="partb"  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="注 冊"/></div></td> 
 </tr>
</table>
</form>
</body>
</html>

總結(jié)

以上所述是小編給大家介紹的用圖片替換checkbox原始樣式并實現(xiàn)同樣的功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)頁標題：用圖片替換checkbox原始樣式并實現(xiàn)同樣的功能
標題鏈接：http://chinadenli.net/article48/gidshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、微信小程序、全網(wǎng)營銷推廣、網(wǎng)站排名、、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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