jquery 實現(xiàn)checkbox全選，反選，全不選等功能代碼(奇數(shù))
更新時間：2012年10月24日 10:55:56 作者：
jquery 實現(xiàn)全選，反選，全不選等功能，下面直接以例子進行說明,需要的朋友可以參考下
設(shè)頁面有如下一組復(fù)選框和幾個相關(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="獲得選中的所有值">
則分別實現(xiàn)相關(guān)功能的完整代碼如下：
$(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(){//獲取所有選中的選項的值
var checkVal='';
$("[name='fruit'][checked]").each(function(){
checkVal+=$(this).val()+',';
})
alert(checkVal);
})
});
注意使用 jquery 之前必須要引入 jquery 包哦！
復(fù)制代碼 代碼如下:
<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="獲得選中的所有值">
則分別實現(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(){//獲取所有選中的選項的值
var checkVal='';
$("[name='fruit'][checked]").each(function(){
checkVal+=$(this).val()+',';
})
alert(checkVal);
})
});
注意使用 jquery 之前必須要引入 jquery 包哦！
您可能感興趣的文章:
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對checkbox 復(fù)選框的全選全不選反選的操作
- jquery實現(xiàn)全選、不選、反選的兩種方法
- jQuery實現(xiàn)全選、反選和不選功能
- 利用jQuery實現(xiàn)CheckBox全選/全不選/反選的簡單代碼
- JQuery選中checkbox方法代碼實例（全選、反選、全不選）
- jquery全選/全不選/反選另一種實現(xiàn)方法(配合原生js)
- 基于jQuery實現(xiàn)復(fù)選框的全選 全不選 反選功能
- jquery 全選、全不選、反選效果的實現(xiàn)代碼【推薦】
- 基于jquery實現(xiàn)復(fù)選框全選，反選，全不選等功能
- jQuery實現(xiàn)全選、反選和不選功能的方法詳解
相關(guān)文章
bootstrap中日歷范圍選擇插件daterangepicker的使用詳解
daterangepicker是bootstrap的一個日歷插件 主要用來選擇時間段的插件 這個插件很好用也很容易操作 。這篇文章主要介紹了bootstrap中日歷范圍選擇插件daterangepicker的使用詳解,需要的朋友可以參考下2018-04-04
jQuery基礎(chǔ)知識點總結(jié)(DOM操作)
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識點總結(jié)(DOM操作)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jquery.mobile 共同布局遇到的問題小結(jié)
這篇文章主要介紹了jquery.mobile 共同布局遇到的問題小結(jié),需要的朋友可以參考下2015-02-02
jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法
這篇文章主要介紹了jQuery實現(xiàn)將div中滾動條滾動到指定位置的方法,涉及jQuery結(jié)合animate方法動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實例講解
今天小編就為大家分享一篇JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery自定義數(shù)值抽獎活動的相關(guān)代碼，具有一定的參考價值，感興趣的朋友可以參考一下2016-06-06
使用jquery獲取一組checkbox的值實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章介紹了jquery實現(xiàn)手風(fēng)琴效果實例代碼，有需要的朋友可以參考一下2013-11-11
jquery實現(xiàn)文本框數(shù)量加減功能的例子分享
在做商城項目的時候，需要在購物車中增加一個商品加減功能，并在加減時同時修改總價格的顯示，并且保證文本框text只能輸入純數(shù)字2014-05-05
這篇文章主要介紹了jQuery實現(xiàn)帶動畫效果的多級下拉菜單代碼,可實現(xiàn)點擊漸隱漸顯效果,涉及jQuery頁面元素的遍歷及鏈?zhǔn)讲僮飨嚓P(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09