jquery checkbox的相關操作總結(jié)

更新時間：2016年10月17日 10:42:00 投稿：lqh

這篇文章主要介紹了jquery checkbox的相關操作總結(jié)的相關資料,需要的朋友可以參考下

jquery checkbox的相關操作——全選、反選、獲得所有選中的checkbox

1、全選

$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
})

2、取消全選（全不選）

$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
})

3、選中所有奇數(shù)

$("#btn3").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
})

4、選中所有偶數(shù)

$("#btn6").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
})

5、反選

$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
})

或者

$("#invert").click(function(){
    $("#ruleMessage [name='delModuleID']:checkbox").each(function(i,o){
      $(o).attr("checked",!$(o).attr("checked"));
    });
  });

6、獲取選擇項的值

var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
})

7、遍歷選中項

$("input[type=checkbox][checked]").each(function(){
 //由于復選框一般選中的是多個,所以可以循環(huán)輸出 
 alert($(this).val()); 
});

8、例子

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>無標題頁</title> 
<script src="js/jquery-1.6.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
jQuery(function($){ 
//全選 
$("#btn1").click(function(){ 
$("input[name='checkbox']").attr("checked","true"); 
}) 
//取消全選 
$("#btn2").click(function(){ 
$("input[name='checkbox']").removeAttr("checked"); 
}) 
//選中所有基數(shù) 
$("#btn3").click(function(){ 
$("input[name='checkbox']:even").attr("checked","true"); 
}) 
//選中所有偶數(shù) 
$("#btn6").click(function(){ 
$("input[name='checkbox']:odd").attr("checked","true"); 
}) 
//反選 
$("#btn4").click(function(){ 
$("input[name='checkbox']").each(function(){ 
if($(this).attr("checked")) 
{ 
$(this).removeAttr("checked"); 
} 
else 
{ 
$(this).attr("checked","true"); 
} 
}) 
}) 
//或許選擇項的值 
var aa=""; 
$("#btn5").click(function(){ 
$("input[name='checkbox']:checkbox:checked").each(function(){ 
aa+=$(this).val() 
}) 
document.write(aa); 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<input type="button" id="btn1" value="全選"> 
<input type="button" id="btn2" value="取消全選"> 
<input type="button" id="btn3" value="選中所有奇數(shù)"> 
<input type="button" id="btn6" value="選中所有偶數(shù)"> 
<input type="button" id="btn4" value="反選"> 
<input type="button" id="btn5" value="獲得選中的所有值"> 
<br> 
<input type="checkbox" name="checkbox" value="checkbox1"> 
checkbox1 
<input type="checkbox" name="checkbox" value="checkbox2"> 
checkbox2 
<input type="checkbox" name="checkbox" value="checkbox3"> 
checkbox3 
<input type="checkbox" name="checkbox" value="checkbox4"> 
checkbox4 
<input type="checkbox" name="checkbox" value="checkbox5"> 
checkbox5 
<input type="checkbox" name="checkbox" value="checkbox6"> 
checkbox6 
<input type="checkbox" name="checkbox" value="checkbox7"> 
checkbox7 
<input type="checkbox" name="checkbox" value="checkbox8"> 
checkbox8 
</div> 
</form> 
</body> 
</html>

9、效果圖

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

jquery代碼實現(xiàn)簡單的隨機圖片瀑布流效果
瀑布流布局最近真的很流行，很多人都跟我一樣想知道是怎么做出來的吧，經(jīng)過網(wǎng)上搜索大量的參考結(jié)合N邊的實驗今天終于被我寫出來了,這里分享給大家，有需要的小伙伴參考下吧。
2015-04-04
Jquery實現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多，由于實現(xiàn)起來比較麻煩，所以自己寫了一個，下面為大家分享下具體的算法及實現(xiàn)代碼，感興趣的朋友可以參考下
2013-10-10
基于JQuery實現(xiàn)CheckBox全選全不選
做項目時需要實現(xiàn)CheckBox的全選，我想用JQuery實現(xiàn)，從網(wǎng)上找了找，網(wǎng)上的確有很多例子，但都不能實現(xiàn)我想要的全部效果
2011-06-06
jQuery模擬完美實現(xiàn)經(jīng)典FLASH導航動畫效果【附demo源碼下載】
這篇文章主要介紹了jQuery模擬完美實現(xiàn)經(jīng)典FLASH導航動畫效果,通過jQuery響應鼠標事件動態(tài)操作頁面元素樣式實現(xiàn)flash切換的效果,非常經(jīng)典實用,文末還提供了demo源碼供讀者下載學習或使用,需要的朋友可以參考下
2016-11-11
jQuery Dialog 取消右上角刪除按鈕事件
這篇文章主要介紹了jQuery Dialog 取消右上角刪除按鈕事件的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09
輕松實現(xiàn)jQuery添加刪除按鈕Click事件
這篇文章主要為大家詳細介紹了如何輕松實現(xiàn)jQuery添加刪除按鈕Click事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
jQuery 跨域訪問問題解決方法
瀏覽器端跨域訪問一直是個問題, 多數(shù)研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.
2009-12-12
jquery插件實現(xiàn)堆疊式菜單
這篇文章主要介紹了jquery插件實現(xiàn)堆疊式菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery網(wǎng)頁版打磚塊小游戲源碼分享
這篇文章主要展示了jQuery網(wǎng)頁版打磚塊小游戲源碼，大家都一定玩過打磚塊這款小游戲，今天我們不僅要玩轉(zhuǎn)它，還要實現(xiàn)打磚塊小游戲，感興趣的小伙伴們可以參考一下
2015-08-08
Jquery亂碼的一次解決過程圖解教程
今天小朋友寫了個程式，出現(xiàn)亂碼，將解決過程分享一下為方便說明，將環(huán)境簡化，vs.net 2003, jquery-1.3.2.js, web service調(diào)用
2010-02-02