jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
本文實(shí)例講述了jquery實(shí)現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件。分享給大家供大家參考。具體如下:
效果圖如下:

具體代碼如下:
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>',{
className: 'tzCheckBox '+(this.checked?'checked':''),
html:'<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery中對(duì)服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié)
- ASP.NET jQuery 實(shí)例5 (顯示CheckBoxList成員選中的內(nèi)容)
- ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消)
- ASP.NET jQuery 實(shí)例15 通過(guò)控件CustomValidator驗(yàn)證CheckBoxList
- CheckBoxList多選樣式j(luò)query、C#獲取選擇項(xiàng)
- jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
- Jquery遍歷checkbox獲取選中項(xiàng)value值的方法
- jquery獲取checkbox的值并post提交
- jQuery將所有被選中的checkbox某個(gè)屬性值連接成字符串的方法
- Jquery 實(shí)現(xiàn)checkbox全選方法
- jQuery實(shí)現(xiàn)checkbox全選的方法
- jquery獲取多個(gè)checkbox的值異步提交給php的方法
- jquery獲取多個(gè)checkbox的值異步提交給php
- jQuery實(shí)現(xiàn)自定義checkbox和radio樣式
- JQuery操作textarea,input,select,checkbox方法
- jQuery獲取checkboxlist的value值的方法
相關(guān)文章
JQuery和HTML5 Canvas實(shí)現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實(shí)現(xiàn)彈幕效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01
jQuery回車(chē)實(shí)現(xiàn)登錄簡(jiǎn)單實(shí)現(xiàn)
實(shí)現(xiàn)登錄的方法有很多,這里為大家介紹下實(shí)現(xiàn)回車(chē)提交表單,具體如下,感興趣的朋友可以參考下2013-08-08
jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
如果頁(yè)面比較高,當(dāng)滾動(dòng)條拖到頁(yè)面的下面的時(shí)候,側(cè)邊欄會(huì)出現(xiàn)一個(gè)固定跟隨瀏覽器的DIV框,下面將思路及具體實(shí)現(xiàn)與大家分享下2014-09-09
jquery實(shí)現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實(shí)例代碼
本實(shí)例使用jquery操作div的CSS實(shí)現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層,具體實(shí)現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05
簡(jiǎn)單實(shí)用jquery版三級(jí)聯(lián)動(dòng)select示例
本文主要為大家介紹下通過(guò)jquery實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)select這里用到的json文件,只是事例,根據(jù)情況添加或編寫(xiě),感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07
純jQuery實(shí)現(xiàn)前端分頁(yè)功能
本文主要介紹了純jquery實(shí)現(xiàn)前端分頁(yè)功能的方法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jQuery實(shí)現(xiàn)強(qiáng)制cookie過(guò)期方法匯總
本文是對(duì)jquery 強(qiáng)制cookie失效的解決方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2015-05-05
Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery給當(dāng)前頁(yè)或者跳轉(zhuǎn)后頁(yè)面的導(dǎo)航欄添加選中后樣式的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
JQuery動(dòng)畫(huà)與特效實(shí)例分析
這篇文章主要介紹了JQuery動(dòng)畫(huà)與特效的用法,實(shí)例分析了顯示與隱藏、滑動(dòng)、淡入淡出及自定義動(dòng)畫(huà)的使用技巧,需要的朋友可以參考下2015-02-02

