jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
更新時間:2015年06月19日 15:25:32 作者:任意球
這篇文章主要介紹了jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實現(xiàn)滑動選擇的效果,需要的朋友可以參考下
本文實例講述了jquery實現(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);
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- JQuery中對服務(wù)器控件 DropdownList, RadioButtonList, CheckboxList的操作總結(jié)
- ASP.NET jQuery 實例5 (顯示CheckBoxList成員選中的內(nèi)容)
- ASP.NET jQuery 實例6 (實現(xiàn)CheckBoxList成員全選或全取消)
- ASP.NET jQuery 實例15 通過控件CustomValidator驗證CheckBoxList
- CheckBoxList多選樣式j(luò)query、C#獲取選擇項
- jQuery獲取Radio,CheckBox選擇的Value值(示例代碼)
- Jquery遍歷checkbox獲取選中項value值的方法
- jquery獲取checkbox的值并post提交
- jQuery將所有被選中的checkbox某個屬性值連接成字符串的方法
- Jquery 實現(xiàn)checkbox全選方法
- jQuery實現(xiàn)checkbox全選的方法
- jquery獲取多個checkbox的值異步提交給php的方法
- jquery獲取多個checkbox的值異步提交給php
- jQuery實現(xiàn)自定義checkbox和radio樣式
- JQuery操作textarea,input,select,checkbox方法
- jQuery獲取checkboxlist的value值的方法
相關(guān)文章
JQuery和HTML5 Canvas實現(xiàn)彈幕效果
這篇文章主要介紹了JQuery和HTML5 Canvas兩種方法實現(xiàn)彈幕效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
jQuery固定浮動側(cè)邊欄實現(xiàn)思路及代碼
如果頁面比較高,當滾動條拖到頁面的下面的時候,側(cè)邊欄會出現(xiàn)一個固定跟隨瀏覽器的DIV框,下面將思路及具體實現(xiàn)與大家分享下2014-09-09
jquery實現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實例代碼
本實例使用jquery操作div的CSS實現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層,具體實現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05
Jquery給當前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實例
下面小編就為大家?guī)硪黄狫query給當前頁或者跳轉(zhuǎn)后頁面的導(dǎo)航欄添加選中后樣式的實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12

