使用jquery與圖片美化checkbox和radio控件的代碼(打包下載)
更新時間：2010年11月11日 14:16:23 作者：
用jquery實(shí)現(xiàn)的對checkbox和radio控件的美化，非常不錯，大家可以通過修改圖片來實(shí)現(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)文章
我們在很多網(wǎng)站看到，當(dāng)我們滾動網(wǎng)頁時，網(wǎng)頁內(nèi)的廣告或某個小區(qū)域并不會消失，而是浮動在屏幕的某個地方，特別是一些局域廣告2012-07-07
這篇文章主要介紹了基于jquery實(shí)現(xiàn)瀑布流布局的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
本篇文章主要介紹了jQuery之動畫效果，詳細(xì)的介紹了各種動畫特效的用法，有需要的可以了解一下。2016-11-11
Jquery練習(xí)之表單驗(yàn)證實(shí)現(xiàn)代碼
Jquery練習(xí)之表單驗(yàn)證實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-12-12
基于jQuery倒計時插件實(shí)現(xiàn)團(tuán)購秒殺效果
倒計時在WEB上應(yīng)用非常廣泛,如考試系統(tǒng)倒計時,團(tuán)購網(wǎng)站中的優(yōu)惠活動倒計時等等。今天,我們來使用jQuery倒計時超級實(shí)現(xiàn)團(tuán)購秒殺效果，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
EasyUI 中combotree 默認(rèn)不能選擇父節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狤asyUI 中combotree 默認(rèn)不能選擇父節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
web的各種前端打印方法之jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印
jquery打印插件PrintArea實(shí)現(xiàn)網(wǎng)頁打印,不可思議吧，接下來為您介紹它的使用方法及操作步驟，感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了jQuery表單選擇器用法以及相關(guān)知識點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-08-08
這篇文章主要為大家詳細(xì)介紹了jquery ajaxfileupload異步上傳插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
聽朋友說要作個九宮格，我也就隨便寫一個，等待完善2012-08-08