checkbox使用示例

更新時間：2013年08月23日 17:22:49 作者：

checkbox想必大家對這個控件并不陌生吧，畢竟在網(wǎng)頁制作過程中經(jīng)常會使用到，下面與大家分享個示例主要介紹checkbox的使用，感興趣的朋友可以參考下

 
<html> 
<head> 
<title> 
checkbox測試 
</title> 
<script type='text/javascript' src='jquery-1.8.2.min.js'></script> 

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#all").change(function() { 
//alert($("#all").val()); //獲得checkbox的值 
// alert($("#all").get(0).checked); //值為true 和false 
if($("#all").get(0).checked){ //將jquery對象轉(zhuǎn)化為dom對象 使用的是dom對象的屬性 
$(":checkbox").attr({ 
//checked: 'checked' 可以和下面一句替換 
"checked":true 
}); 
}else{ 
//$(":checkbox").removeAttr('checked'); 可以和下面一句替換 
$(":checkbox").attr({ 
"checked":false 
}); 
} 
//第一種操作數(shù)組方法 
/* //each(function()) 函數(shù) 
var arr=new Array(); //一般處理是checkbox中值用數(shù)組表示 傳遞到后臺 
var i=0; 
$(":checkbox").each(function(index){ 
if($(this).val()=="1"){ 
return true; 
} 
arr[i]=$(this).val(); 
alert(i +"前面是下標(biāo)后面是值"+ arr[i++]); //獲得checkbox 值 
}); */ 
//第二種操作數(shù)組方法 
var arr= new Array(); 
$(":checkbox").each(function(index){ 
if($(this).val()!="1"){ 
arr.push($(this).val()); 
} 

}); 
//組個輸出數(shù)組值 
for(var j=0;j<arr.length;j++){ 
alert(arr[j]); 
} 
var str=arr.join(","); //將數(shù)組用，好連接成為字符串 
alert(str); //輸出字符串 
}); 

}); 

</script> 
</head> 
<body> 
<input type='checkbox' id='all' value='1' />全選<br /> 
<input type='checkbox' id='all1' value='2' />num1<br /> 
<input type='checkbox' id='all2' value='3' />num2<br /> 
<input type='checkbox' id='all3' value='4' />num3<br /> 
<input type='checkbox' id='all5' value='5' />num4<br /> 
</body> 
</html> 

checkbox

相關(guān)文章

jquery插件實現(xiàn)代碼雨特效
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果
這篇文章主要介紹了基于jquery實現(xiàn)省市區(qū)三級聯(lián)動效果,需要的朋友可以參考下
2015-12-12
使用jquery實現(xiàn)div的tab切換實例代碼
以前使用js代碼來寫的簡單效果現(xiàn)在用jQ來寫，具體實現(xiàn)如下，感興趣的朋友可以參考下哈
2013-05-05
jQuery+ajax實現(xiàn)用戶登錄驗證
這篇文章主要為大家詳細(xì)介紹了jQuery+ajax實現(xiàn)用戶登錄驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
jQuery實現(xiàn)獲取隱藏div高度的方法示例
這篇文章主要介紹了jQuery實現(xiàn)獲取隱藏div高度的方法,結(jié)合實例形式較為詳細(xì)的分析了jQuery針對頁面元素屬性操作的相關(guān)技巧,需要的朋友可以參考下
2017-02-02
jQuery實現(xiàn)立體式數(shù)字滾動條增加效果
這篇文章主要介紹了jQuery立體式數(shù)字滾動條增加的相關(guān)資料,代碼簡單易懂，非常不錯，需要的朋友可以參考下
2016-12-12
jQueryMobile之窗體長內(nèi)容的缺陷與解決方法實例分析
這篇文章主要介紹了jQueryMobile之窗體長內(nèi)容的缺陷與解決方法,結(jié)合具體實例形式分析了jQueryMobile底部懸浮層遮擋情況下的解決方法,非常簡單實用,需要的朋友可以參考下
2017-09-09
jquery之a(chǎn)jaxfileupload異步上傳插件(附工程代碼)
在處理文件上傳時需要使用到文件的異步上傳，這里使用Jquery Ajax File Uploader這個組件,服務(wù)器端采用struts2來處理文件上傳
2013-04-04
Jquery 快速構(gòu)建可拖曳的購物車DragDrop
拖曳功能早已經(jīng)成為各個網(wǎng)站吸引用戶的一大亮點，那有沒有想過如何把拖曳功能應(yīng)用到電子商務(wù)網(wǎng)站的購物車功能模塊中呢？
2009-11-11
全面解析DOM操作和jQuery實現(xiàn)選項移動操作代碼分享
這篇文章主要介紹了DOM操作和jQuery實現(xiàn)選項移動操作代碼分享的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-06-06