快捷導(dǎo)航

jquery 實(shí)現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))

更新時(shí)間：2012年10月24日 10:55:56 作者：

jquery 實(shí)現(xiàn)全選，反選，全不選等功能，下面直接以例子進(jìn)行說明,需要的朋友可以參考下

設(shè)頁面有如下一組復(fù)選框和幾個(gè)相關(guān)按鈕（全選，反選，全不選等）：

 
<input type="checkbox" name="fruit" value="apple" />蘋果 
<input type="checkbox" name="fruit" value="orange" />橘子 
<input type="checkbox" name="fruit" value="banana" />香蕉 
<input type="checkbox" name="fruit" value="grape" />葡萄 
<input type="button" id="btn1" value="全選"> 
<input type="button" id="btn2" value="全不選"> 
<input type="button" id="btn3" value="反選"> 
<input type="button" id="btn4" value="選中所有奇數(shù)"> 
<input type="button" id="btn5" value="獲得選中的所有值"> 

則分別實(shí)現(xiàn)相關(guān)功能的完整代碼如下：

復(fù)制代碼代碼如下:

 
$(function(){ 
$('#btn1').click(function(){//全選 
$("[name='fruit']").attr('checked','true'); 
}); 
$('#btn2').click(function(){//全不選 
$("[name='fruit']").removeAttr('checked'); 
}); 
$('#btn3').click(function(){//反選 
$("[name='fruit']").each(function(){ 
if($(this).attr('checked')){ 
$(this).removeAttr('checked'); 
}else{ 
$(this).attr('checked','true'); 
} 
}) 
}); 
$("#btn4").click(function(){//選中所有奇數(shù) 
$("[name='fruit']:even").attr('checked','true'); 
}) 
$("#btn5").click(function(){//獲取所有選中的選項(xiàng)的值 
var checkVal=''; 
$("[name='fruit'][checked]").each(function(){ 
checkVal+=$(this).val()+','; 
}) 
alert(checkVal); 
}) 
}); 

注意使用 jquery 之前必須要引入 jquery 包哦！

您可能感興趣的文章:

相關(guān)文章

bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個(gè)日歷插件主要用來選擇時(shí)間段的插件這個(gè)插件很好用也很容易操作。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下
2018-04-04
jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識(shí)點(diǎn)總結(jié)(DOM操作)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jquery.mobile 共同布局遇到的問題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下
2015-02-02
jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)將div中滾動(dòng)條滾動(dòng)到指定位置的方法,涉及jQuery結(jié)合animate方法動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解
今天小編就為大家分享一篇JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
jQuery自定義數(shù)值抽獎(jiǎng)活動(dòng)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery自定義數(shù)值抽獎(jiǎng)活動(dòng)的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-06-06
jquery獲取一組checkbox的值(實(shí)例代碼)
使用jquery獲取一組checkbox的值實(shí)例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼
這篇文章介紹了jquery實(shí)現(xiàn)手風(fēng)琴效果實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
jquery實(shí)現(xiàn)文本框數(shù)量加減功能的例子分享
在做商城項(xiàng)目的時(shí)候，需要在購(gòu)物車中增加一個(gè)商品加減功能，并在加減時(shí)同時(shí)修改總價(jià)格的顯示，并且保證文本框text只能輸入純數(shù)字
2014-05-05
jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶動(dòng)畫效果的多級(jí)下拉菜單代碼,可實(shí)現(xiàn)點(diǎn)擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09