快捷導(dǎo)航

jquery操作checkbox示例分享

更新時(shí)間：2014年07月21日 10:09:23 投稿：hebedich

這篇文章主要介紹了jquery操作checkbox,需要的朋友可以參考下

checkbox操作

1. 全選、全不選

2.打印所有的選中項(xiàng)目

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> </title>
 <script type="text/javascript" src="jquery-1.3.2.js"></script>
 <script>
 // 全選、全不選
 function docChkBoxChange(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 設(shè)置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  this.checked = isChecked;
  });
 }//end function
 // 打印所有的選中項(xiàng)目
 function printChoose(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 設(shè)置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  if(this.checked){
  alert(this.value)
  }
  });
 }//end function
 </script>
 </head>

 <body>
 <table>
 <tr>
 <td>
  <input id='docChkBoxTop' type="checkbox" onClick='docChkBoxChange()'>全選、全不選
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='apple'>蘋果
 </td>
 </tr>
 <tr>
 <td>
  <input name='docChkBox' type="checkbox" value='banana'>香蕉
 </td>
 </tr>
 
 <tr>
 <td>
  <input type="button" value='打印所有選中項(xiàng)' onClick='printChoose()'>
 </td>
 </tr>
 </table>
 </body>
</html>

您可能感興趣的文章:

相關(guān)文章

深入分析jQuery.one() 函數(shù)
這篇文章主要介紹了jQuery.one() 函數(shù)的用法，文中通過示例代碼幫助大家更好的學(xué)習(xí)，感興趣的朋友可以參考一下
2020-06-06
jQuery操作Table技巧大匯總
這篇文章主要介紹了jQuery操作Table技巧,實(shí)例匯總了jQuery針對(duì)Table的鼠標(biāo)響應(yīng)、樣式修改、添加刪除等常用技巧,需要的朋友可以參考下
2016-01-01
一個(gè)基于jquery的文本框記數(shù)器
基于jquery的文本框記數(shù)器實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-09-09
jquery easyui滾動(dòng)條部分設(shè)置介紹
dialog并沒有隨著滾動(dòng)條往下滾動(dòng)，這時(shí)就需要用戶滑動(dòng)滾動(dòng)條來定位dialog，在說出解決方案前先來普及一下jquery關(guān)于定位的幾個(gè)方法
2013-09-09
innerHTML與jquery里的html()區(qū)別介紹
我原本一直以為innerHTML和jquery里的html其實(shí)是完全一樣的，jquery是多此一舉了，直到我遇到一次問題
2012-10-10
jquery 使用簡(jiǎn)明教程
jQuery是目前使用最廣泛的javascript函數(shù)庫(kù)。據(jù)統(tǒng)計(jì)，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。對(duì)于網(wǎng)頁(yè)開發(fā)者來說，學(xué)會(huì)jQuery是必要的。因?yàn)樗屇懔私鈽I(yè)界最通用的技術(shù)，為將來學(xué)習(xí)更高級(jí)的庫(kù)打下基礎(chǔ)，并且確實(shí)可以很輕松地做出許多復(fù)雜的效果
2014-03-03
jQuery實(shí)用技巧必備（中）
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下
2015-11-11
40個(gè)有創(chuàng)意的jQuery圖片、內(nèi)容滑動(dòng)及彈出插件收藏集之一
在網(wǎng)頁(yè)的首頁(yè)或圖片專題頁(yè)面很多地方都會(huì)用到圖片滑動(dòng)插件來循環(huán)切換多張圖片，并且用戶可以點(diǎn)擊左右按鈕來切換圖片。相信大家都知道jQuery是最優(yōu)秀的Javascript框架之一
2011-12-12
jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的記住帳號(hào)密碼功能,結(jié)合完整實(shí)例形式分析了jQuery使用jquery.cookie.js插件記錄用戶信息相關(guān)操作技巧,需要的朋友可以參考下
2019-08-08
JQuery EasyUI 對(duì)話框的使用方法
jQuery EasyUI 對(duì)話框(Dialog)用法與EasyUI的窗口用法極為相似，最終的效果圖也只與窗口的效果圖差幾個(gè)按鈕
2010-10-10