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)功能的完整代碼如下:
$(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 包哦!
復(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="獲得選中的所有值">
則分別實(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 包哦!
您可能感興趣的文章:
- jquery一鍵控制checkbox全選、反選或全不選
- jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
- jquery實(shí)現(xiàn)全選、不選、反選的兩種方法
- jQuery實(shí)現(xiàn)全選、反選和不選功能
- 利用jQuery實(shí)現(xiàn)CheckBox全選/全不選/反選的簡單代碼
- JQuery選中checkbox方法代碼實(shí)例(全選、反選、全不選)
- jquery全選/全不選/反選另一種實(shí)現(xiàn)方法(配合原生js)
- 基于jQuery實(shí)現(xiàn)復(fù)選框的全選 全不選 反選功能
- jquery 全選、全不選、反選效果的實(shí)現(xiàn)代碼【推薦】
- 基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
- jQuery實(shí)現(xiàn)全選、反選和不選功能的方法詳解
相關(guān)文章
Jquery $.getJSON 在IE下的緩存問題解決方法
$.getJSON 的url都是相同的 問題來了 我修改 或者 新增樹節(jié)點(diǎn) 然后刷新tree IE竟然毫無變化 在其他瀏覽器上面都OK,于是搜到一個(gè)可行的解決方法2014-10-10jQuery居中元素scrollleft計(jì)算方法示例
這篇文章主要介紹了jQuery居中元素scrollleft計(jì)算方法,結(jié)合實(shí)例形式分析了jQuery獲取及計(jì)算頁面滾動(dòng)元素的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01jQuery實(shí)現(xiàn)點(diǎn)擊后標(biāo)記當(dāng)前菜單位置(背景高亮菜單)效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊后標(biāo)記當(dāng)前菜單位置(背景高亮菜單)效果,涉及jquery鼠標(biāo)點(diǎn)擊事件及鏈?zhǔn)讲僮骺刂圃貥邮絼?dòng)態(tài)變換的技巧,需要的朋友可以參考下2015-08-08jcarousellite.js 基于Jquery的圖片無縫滾動(dòng)插件
基于Jquery的圖片無縫滾動(dòng)插件,需要的朋友可以參考下。2010-12-12jquery隨意添加移除html的實(shí)現(xiàn)代碼
jquery隨意添加移除html的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-06-06