jquery操作checkbox示例分享

前端技术 2023/09/04 JavaScript

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>

本文地址：https://www.stayed.cn/item/11064

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案