jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
本文實例講述了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)文章
ui組件之input多選下拉實現(xiàn)方法(帶有搜索功能)
這篇文章主要介紹了ui組件之input多選下拉實現(xiàn)方法(帶有搜索功能)的相關(guān)資料,需要的朋友可以參考下2016-07-07
Jquery插件實現(xiàn)點擊獲取驗證碼后60秒內(nèi)禁止重新獲取
這篇文章主要介紹了Jquery插件實現(xiàn)點擊獲取驗證碼后60秒內(nèi)禁止重新獲取,十分常用的功能,這里分享給大家,有需要的小伙伴參考下吧。2015-03-03
formStorage 基于jquery的一個插件(存儲表單中元素的狀態(tài)到本地)
原理很簡單,通過本地存儲機制(userData或者localStorage),存儲表單中元素的狀態(tài)到本地. 需要時可以把所存儲的狀態(tài)還原到表單元素上2012-01-01
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用實現(xiàn)代碼,需要的朋友可以參考下。2010-03-03
JQuery和html+css實現(xiàn)帶小圓點和左右按鈕的輪播圖實例
下面小編就為大家?guī)硪黄狫Query和html+css實現(xiàn)帶小圓點和左右按鈕的輪播圖實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
關(guān)于jQuery對象數(shù)據(jù)緩存Cache原理以及jQuery.data詳解
網(wǎng)上有很多教你怎么使用jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存,但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])幾乎沒有什么文章說清楚它們兩的區(qū)別,所以我用到了,研究下分享給大家。2013-04-04

