checkbox用圖片替換原始樣式，並實現同樣的功能

1.結構：

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

2.css里：

　　1）設置圖片的div絕對定位，調整讓它與原始input重合。

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

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

　　4）調整兩個的位置，讓之重合。

　　5）設置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背景變為沒選中，而第二個radio背景變為被選中，還用上面的jq里 的代碼是不能實現的，會出現第一個選中之后，再點第二個會讓兩個的背景都是被選中的圖片。

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

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