簡(jiǎn)單實(shí)現(xiàn)jQuery多選框功能
Jquery多選框的基本操作:支持全選、反選、取消全選的功能
HTML正文:
<input type="checkbox" id="c1">全選/全不選<br> 興趣愛(ài)好:<br> <input type="checkbox" name="interst" value="basketball">籃球 <input type="checkbox" name="interst" value="football">足球 <input type="checkbox" name="interst" value="bedminton">羽毛球<br> <input type="button" id="b1" value="全選"> <input type="button" id="b2" value="全不選"> <input type="button" id="b3" value="反選"> <input type="button" id="b4" value="顯示">
Javascript操作代碼:
$("#c1").click(function(){ if(this.checked){ $("input[name='interst']").attr("checked","checked"); }else{ //$("input[name='interst']").attr("checked",""); //等價(jià)于 $("input[name='interst']").removeAttr("checked"); } }); $("#b1").click(function(){ $("input[name='interst']").attr("checked","checked"); }); $("#b2").click(function(){ $("input[name='interst']").attr("checked",""); }); $("#b3").click(function(){ $("input[name='interst']").each(function(){ if(this.checked){ this.checked=""; }else{ this.checked="checked"; } }); }); $("#b4").click(function(){ $("input[name='interst']:checked").each(function(){ alert(this.value); }); });
效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery 獲取多選框的值及多選框中文的函數(shù)
- jQuery實(shí)現(xiàn)的多選框多級(jí)聯(lián)動(dòng)插件
- jquery select多選框的左右移動(dòng) 具體實(shí)現(xiàn)代碼
- jquery對(duì)單選框,多選框,文本框等常見(jiàn)操作小結(jié)
- jQuery對(duì)下拉框,單選框,多選框的操作
- jQuery多選框選擇數(shù)量限制方法
- jquery中表單 多選框的一種巧妙寫(xiě)法
- jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
- Jquery多選框互相內(nèi)容交換的實(shí)例代碼
- jQuery中實(shí)現(xiàn)prop()函數(shù)控制多選框(全選,反選)
- jQuery實(shí)現(xiàn)獲取多選框的值示例
相關(guān)文章
jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果仿蘑菇街
這篇文章主要介紹了jquery實(shí)現(xiàn)導(dǎo)航固定頂部的效果,仿蘑菇街的,感覺(jué)還不錯(cuò),下面將實(shí)例與大家分享下2014-10-10如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中,我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03JQuery擴(kuò)展插件Validate 3通過(guò)參數(shù)設(shè)置錯(cuò)誤信息
最終顯示在頁(yè)面上的錯(cuò)誤分為兩種:第一種是默認(rèn)錯(cuò)誤信息,該信息已經(jīng)被定義在插件中了,可以手動(dòng)修改。2011-09-09jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單步驟流程導(dǎo)航,代碼實(shí)現(xiàn)效果簡(jiǎn)單精致,推薦給大家,有需要的小伙伴可以參考下。2015-08-08基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合
這篇文章主要介紹了基于MVC5和Bootstrap的jQuery TreeView樹(shù)形控件(二)之?dāng)?shù)據(jù)支持json字符串、list集合的相關(guān)資料,需要的朋友可以參考下2016-08-08jquery插件orbit.js實(shí)現(xiàn)圖片折疊輪換特效
Orbit是一個(gè)設(shè)計(jì)良好并且容易使用的jQuery圖片滑動(dòng)幻燈片插件,它除了支持圖片滾動(dòng)切換展示外,還支持針對(duì)內(nèi)容的滾動(dòng)。插件的定制性相當(dāng)高,它提供了多個(gè)參數(shù)的設(shè)置,通過(guò)設(shè)置你可以將它打造成完全符合你要求的樣式。2015-04-04