jquery操作checkbox示例分享

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery操作checkbox示例分享

編輯：JQuery特效代碼

checkbox操作

1. 全選、全不選

2.打印所有的選中項目

<!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');
  // 設置以下所有的 checkBox 列表
  jQuery("input[name=docChkBox]").each(function(){
  this.checked = isChecked;
  });
 }//end function
 // 打印所有的選中項目
 function printChoose(){
  var isChecked = jQuery('#docChkBoxTop').attr('checked');
  // 設置以下所有的 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='打印所有選中項' onClick='printChoose()'>
 </td>
 </tr>
 </table>
 </body>
</html>

JQuery特效代碼

jq使用parent和parents方法獲取父節點: Jquery學習筆記：利用parent和parents方法獲取父節點通過選擇器一般只能獲取指定標識的
一樣的table？不一樣的table(可編輯狀態table): 新的一天開始了，生活還要繼續，今天要和大家分享的是不一樣的table，普通的table就用於顯示數據
推薦40個非常優秀的jQuery插件和教程（系列三）: 40款非常棒的 jQuery 插件和制作教程（系列一）40款非常棒的 jQuery 插件和制作教程（

DIV CSS 佈局教程網

相關文章