jquery操作checkbox示例分享 - Web前端

作者：98wpeu发布时间：2026-07-27分类：网页前端技术浏览：3

导读：checkbox操作1.全选、全不选2.打印所有的选中项目<!DOCtypehtmlPUBLIC"-//W3C//DTDHTML4.01Transi...

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>

标签：示例操作 Web checkbox jquery

上一篇：jquery 页眉单行信息滚动显示实现思路及代码 - Web前端
下一篇：jquery中each方法示例和常用选择器 - Web前端

jquery操作checkbox示例分享 - Web前端

相关推荐