使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
更新時間：2010年11月11日 14:16:23 作者：
用jquery實現(xiàn)的對checkbox和radio控件的美化，非常不錯，大家可以通過修改圖片來實現(xiàn)更漂亮的效果。
效果圖:
HTML:
<div id="chklist" style="padding:10px; font-size:14px; ">
<input type="checkbox" value='1' /><label>aaaaaa</label>
<input type="checkbox" value='2' /><label>bbbbbb</label>
<input type="checkbox" value='3' /><label>ccccc</label>
<input type="checkbox" value='4' /><label>ddddd</label>
</div>
<div id="radiolist" style="padding:10px; font-size:14px; ">
<input name='r' type="radio" value='11' /><label>AAAAAA</label>
<input name='r' type="radio" value='21' /><label>BBBBBBBB</label>
<input name='r' type="radio" value='31' /><label>CCCCCC</label>
<input name='r' type="radio" value='41' /><label>DDDDDD</label>
</div>
JS:
$(function(){
$('#chklist').hcheckbox();
$('#radiolist').hradio();
$('#btnOK').click(function(){
var checkedValues = new Array();
$('#chklist :checkbox').each(function(){
if($(this).is(':checked'))
{
checkedValues.push($(this).val());
}
});
alert(checkedValues.join(','));
alert($('#radiolist :checked').val());
})
});
引入jquery文件是必須的
還有一個是 checkbox 的插件JS文件 jquery-hcheckbox.js, 在下載的壓縮包中有 源文件 和 DEMO
如果在此基礎(chǔ)上您做出了更美的請通知我哦~~
演示地址 http://demo.jb51.net/js/jQuery_HCheckbox/index.html
打包下載地址
HTML:
復(fù)制代碼 代碼如下:
<div id="chklist" style="padding:10px; font-size:14px; ">
<input type="checkbox" value='1' /><label>aaaaaa</label>
<input type="checkbox" value='2' /><label>bbbbbb</label>
<input type="checkbox" value='3' /><label>ccccc</label>
<input type="checkbox" value='4' /><label>ddddd</label>
</div>
<div id="radiolist" style="padding:10px; font-size:14px; ">
<input name='r' type="radio" value='11' /><label>AAAAAA</label>
<input name='r' type="radio" value='21' /><label>BBBBBBBB</label>
<input name='r' type="radio" value='31' /><label>CCCCCC</label>
<input name='r' type="radio" value='41' /><label>DDDDDD</label>
</div>
JS:
復(fù)制代碼 代碼如下:
$(function(){
$('#chklist').hcheckbox();
$('#radiolist').hradio();
$('#btnOK').click(function(){
var checkedValues = new Array();
$('#chklist :checkbox').each(function(){
if($(this).is(':checked'))
{
checkedValues.push($(this).val());
}
});
alert(checkedValues.join(','));
alert($('#radiolist :checked').val());
})
});
引入jquery文件是必須的
還有一個是 checkbox 的插件JS文件 jquery-hcheckbox.js, 在下載的壓縮包中有 源文件 和 DEMO
如果在此基礎(chǔ)上您做出了更美的請通知我哦~~
演示地址 http://demo.jb51.net/js/jQuery_HCheckbox/index.html
打包下載地址
相關(guān)文章
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼
基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼，需要的朋友可以參考下。2011-04-04
從零開始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.2011-02-02
這篇文章主要介紹了easyUI 實現(xiàn)的后臺分頁與前臺顯示功能,結(jié)合實例形式分析了easyUI 后臺數(shù)據(jù)交互、分頁與前臺顯示相關(guān)操作技巧及注意事項,需要的朋友可以參考下2020-06-06
jQuery幫助之CSS尺寸(五)outerHeight、outerWidth
在前面我們分別通過innerHeight()和innerWidth()來獲得第一個匹配元素內(nèi)部區(qū)域的高度和寬度，我們在應(yīng)用中往往除了需要內(nèi)部的尺寸，同樣還需要知道外部的高度和寬度.2009-11-11
本文給大家講述的是如何使用jspdf生成pdf報表的方法和示例，十分的實用，有需要的小伙伴可以參考下。2015-07-07
JQuery 操作select標(biāo)簽實現(xiàn)代碼
我們經(jīng)常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
這篇文章主要介紹了jQuery控制的不同方向的滑動(向左、向右滑動等),需要的朋友可以參考下2014-07-07
這篇文章主要介紹了60個很實用的jQuery代碼開發(fā)技巧收集,使用jquery的朋友可以參考下核心代碼的使用，需要的朋友可以參考下2014-12-12
jQuery實現(xiàn)點擊彈出背景變暗遮罩效果實例代碼
這篇文章主要介紹了jQuery實現(xiàn)點擊彈出背景變暗遮罩效果的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06
jQuery綁定事件不執(zhí)行但alert后可以正常執(zhí)行
這篇文章主要為大家解決下為什么jQuery綁定事件不執(zhí)行而alert后可以正常執(zhí)行,需要的朋友可以參考下2014-06-06