簡單實現(xiàn)jQuery多選框功能
更新時間：2017年01月09日 14:58:27 作者：Zerone1993
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)jQuery多選框功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
Jquery多選框的基本操作：支持全選、反選、取消全選的功能
HTML正文：
<input type="checkbox" id="c1">全選/全不選<br> 興趣愛好：<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",""); //等價于
$("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);
});
});
效果：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
本篇文章主要是對jquery某一元素重復綁定的問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法,涉及jQuery針對頁面元素的動態(tài)添加與刪除相關技巧,非常簡便實用,需要的朋友可以參考下2016-08-08
jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例
這篇文章主要介紹了jQuery實現(xiàn)回車鍵（Enter）切換文本框焦點的代碼實例,需要的朋友可以參考下2014-05-05
剛開始學習jQuery，可能一時會分不清楚哪些是jQuery對象，哪些是DOM對象。至于DOM對象不多解釋，我們接觸的太多了，下面重點介紹一下jQuery，以及兩者相互間的轉換。2010-04-04
本篇文章為大家分析了在ajax進行數(shù)據(jù)請求的時候遇到的問題以及解決辦法，一起參考學習下。2018-01-01
基于jquery的監(jiān)控數(shù)據(jù)是否發(fā)生改變
在實際開發(fā)中經常會遇到數(shù)據(jù)沒發(fā)生改變是，由于用戶不小心點擊保存，這樣導致數(shù)據(jù)庫的日志增大；還有數(shù)據(jù)填寫好后，忘了添加保存直接關閉頁面離開。2011-04-04
Ajax在Web應用中的作用越來越大，許多工具都包含了對這一功能的使用，以下是對這些常用工具中Ajax的典型實例.2016-06-06
這段代碼是我在做13年一份兼職的時候無聊加上去的，為jQuery添加觸摸事件的支持。因為做得有點無聊，所以就幫客戶添加了用響應式網(wǎng)頁+JS touch兼容了移動設備，主要是Webkit的移動設備2014-02-02
Jqzoom是基于jquery的放大鏡效果插件，兼容多款瀏覽器，喜歡的朋友可以測試下。2010-04-04
jquery插件pagination實現(xiàn)無刷新ajax分頁
這篇文章主要介紹了jquery插件pagination實現(xiàn)無刷新ajax分頁的相關資料,需要的朋友可以參考下2015-09-09