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