基于jquery實現(xiàn)復(fù)選框全選,反選,全不選等功能
更新時間:2015年10月16日 14:22:39 投稿:lijiao
本文分享一段基于jQuery實現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴可以參考一下
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 包哦!
以上就是小編辛苦整理的代碼,是不是用起來很方便,希望能夠幫到大家。
您可能感興趣的文章:
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對checkbox 復(fù)選框的全選全不選反選的操作
- jquery 實現(xiàn)checkbox全選,反選,全不選等功能代碼(奇數(shù))
- 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)全選、反選和不選功能的方法詳解
相關(guān)文章
jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法詳解
這篇文章主要介紹了jQuery獲取復(fù)選框被選中數(shù)量及判斷選擇值的方法,結(jié)合實例形式分析了jQuery操作復(fù)選框進行判定與統(tǒng)計的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2016-05-05
用jquery設(shè)置按鈕的disabled屬性的實現(xiàn)代碼
在html標(biāo)簽中設(shè)置按鈕被禁用,可以使用如下代碼2010-11-11
easyui-datagrid開發(fā)實踐(總結(jié))
本篇文章主要介紹了easyui-datagrid開發(fā)實踐(總結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jQuery調(diào)取jSon數(shù)據(jù)并展示的方法
這篇文章主要介紹了jQuery調(diào)取jSon數(shù)據(jù)并展示的方法,實例分析了jQuery調(diào)用json數(shù)據(jù)及展示的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01

