製作一個自定義的checkbox
一直都不知道checkbox，radio，上傳檔案標籤的樣式怎麼去改。
和平常一樣，頁面的問題還是要去改！不多說了，心累啊！現在就說一下我是怎麼解決這個問題的。
1.這個是一開始的頁面（注意記住密碼前面的checkbox）：
2.這個是最終完成後的樣式（是不是覺得瞬間高大上了）：
現在就說一下我是怎麼解決的，方法很笨，請大家勿噴
1.首先這個checkbox是由三部分組成的
這是css程式碼：
.lg_rpw{border:1px #fff solid;visibility:hidden;position:absolute;width:20px;height:20px;}
.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;}
.lg_remember{float:left;width:24px;height:24px;margin-right:10px;}
這是html程式碼：
<div class="lg_remember">
<input type="checkbox" name="rempw" value="1" class="lg_rpw" id="lg_rpw" checked="checked"/>
<label for="lg_rpw" class="lg_rpw1" id="rem_pass"><img src="{SITE_PATH}app/css/image/rem_pass.png" alt="" /></label>
</div>
這是js程式碼：
$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).attr('checked');
if(tfchecked=='checked') {
$('#rem_pass').append('<img src="{SITE_PATH}app/css/image/rem_pass.png" alt="" />');
}else {
$('#rem_pass').children().remove();
}
});
});
第一部分，最外層的div框，用來框住checkbox控制元件和一個label控制元件然後定位
第二部分，一個checkbox，其實自始至終這個checkbox的樣式是根本改變不了的，這裡只是做了一個障眼法
第三部分，一個label控制元件，這個label才是樣式的關鍵。
---------------------------------------------------------------------------------------我是分割線---------------------------------------------------------------------------------
設定checkbox的樣式為：visiibility:hidden，意思是讓checkbox不可見，但它是存在的
然後用一個label控制元件使用position:absolute;定位放到它的上面，繫結起來，這樣點選label同時也相當於點選了checkbox
然後設定label控制元件的邊框為圓角，這裡我為了簡單沒有進行瀏覽器的相容，如果需要再多瀏覽器中使用請在前面加上-webkit,等標籤，可去百度。
然後就是加入一個對號的圖示了。到這裡就基本上大功告成了，只是還沒有點選的效果
所以最後就要使用jq加上動態效果
這裡的jq程式碼十分簡單就不仔細講解了。好了！上午的任務算是完成了，下午繼續死磕。。。。。乾巴爹哦！
--------------------------------------------------------------------------------------我是分割線-------------------------------------------------------------------------------------
沒想到還沒有完，剛才在ie下測試的時候發現image會放在label上面，這樣當點選對號圖片的時候不會有反應，只有點選到label時候才會好使，所以我把這個圖片放到了label的background-image樣式裡，修改如下：
.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;background-image:url(image/rem_pass.png);background-repeat:no-repeat;}
加上了一個background-image屬性，然後相應的html程式碼和js程式碼也需要修改，修改如下：
HTML程式碼：
<div class="lg_rmb">
<div class="lg_remember">
<input type="checkbox" name="rempw" value="1" class="lg_rpw" id="lg_rpw" checked="checked"/>
<label for="lg_rpw" class="lg_rpw1" id="rem_pass"></label>
</div>
記住密碼
</div>
這裡只是將img標籤去掉了。
js程式碼：
$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).prop('checked');
if(tfchecked) {
$('#rem_pass').css('background-image','');
}else {
$('#rem_pass').css('background-image','url(image/rem_pass.png)');
}
});
});
剛才發現使用checkbox的attr來獲取是否選中是不對的，需要使用prop來獲取布林值，返回true，false
這裡我發現當tfchecked的值為真的時候應該加上background-image，但是發現卻是相反的，當返回值是true的時候需要去掉background-image，下面我會繼續檢視這個問題到底是為什麼。
----------------------------------------------------------------------------這裡找到了一個解決辦法--------------------------------------------------------------------
我把background-image屬性單獨寫入一個樣式裡：
css程式碼：
.lg_rpw{border:1px #fff solid;visibility:hidden;position:absolute;width:20px;height:20px;}
.lg_rpw1{border-radius:4px;border:2px solid #cbdaee;position:absolute;width:20px;height:20px;padding:2px;}
.lg_tupian{background-image:url(image/rem_pass.png);background-repeat:no-repeat;}
.lg_remember{float:left;width:24px;height:24px;margin-right:10px;}
這裡我只是去掉了lg_rpw裡面background-image屬性，然後加入了一個新的lg_tupian樣式
HTML程式碼：
<div class="lg_rmb">
<div class="lg_remember">
<input type="checkbox" name="rempw" value="1" class="lg_rpw" id="lg_rpw" checked="checked"/>
<label for="lg_rpw" class="lg_rpw1 lg_tupian" id="rem_pass"></label>
</div>
記住密碼
</div>
這裡給label加入了一個新的樣式
js程式碼：
$(function() {
$('#lg_rpw').change(function() {
var tfchecked = $(this).prop('checked');
if(tfchecked) {
$('#rem_pass').addClass('lg_tupian');
}else {
$('#rem_pass').removeClass('lg_tupian');
}
});
});
到這裡就完美了！！有沒有發現js程式碼也變得簡潔了，當tfchecked為true的時候代表checkbox被選中了，然後加入了background-image這個樣式，就出現了對號，當tfchecked為false的時候代表checkbox沒有被選中，然後移除background-image這個樣式，對號就不見了。OK！下班了，吃飯去！