jquery checkbox復選框美化點擊checkbox事件 選中 取消樣式



186 743 248



特效描述:復選框美化 點擊checkbox事件 選中取消樣式,jquery tzCheckbox 插件表單美化,設置默認瀏覽器復選框美化,提高form 表單的美感與吸引力,提高用戶體驗設計,這一款復選框表單美化中非常實用的jquery 復選框 插件。

代碼結構

1. 引入JS

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tzCheckbox.js"></script>

2. HTML代碼

<div id="page">
<form method="get" action="./">
	<ul>
		<li><label for="ch_effects">顯示效果: </label><input type="checkbox" id="ch_effects" name="ch_effects" data-on="顯示效果" data-off="隱藏效果" checked="checked" /></li>
		<li><label for="ch_location">使位置跟蹤: </label><input type="checkbox" id="ch_location" name="ch_location" checked="checked" /></li>
		<li><label for="ch_showsearch">包括我在搜索結果中: </label><input type="checkbox" id="ch_showsearch" name="ch_showsearch" disabled="disabled" /></li>
		<li><label for="ch_emails">電子郵件通知: </label><input type="checkbox" id="ch_emails" name="ch_emails" data-on="打開" data-off="關閉" disabled="disabled" /></li>
	</ul>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$('input[type=checkbox]').tzCheckbox({labels:['Enable','Disable']});
	$("#page form li:odd").addClass("even");
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 圖片滑動 圖片滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表