溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-10-10 07:35:48 來源：腳本之家 閱讀：146 作者：站住，別跑 欄目：web開發(fā)

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)闆]選中，而第二個(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樣式為給定的一張圖片，非選中：

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

  ，選中：

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

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

主要知識(shí)點(diǎn)：

 (1)通過 label 元素內(nèi)點(diǎn)擊圖片，就會(huì)觸發(fā)checkbox控件。就是說，當(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通過css設(shè)置為隱藏
.clsCheckBox{ 
 display:none; 
 }

（2）點(diǎn)擊圖片時(shí)通過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;
 }
 }

登錄頁面代碼：

<!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="注 冊(cè)"/></div></td> 
 </tr>
</table>
</form>
</body>
</html>

總結(jié)

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手