例子：点击全选，将所有checkbox选中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery.min.js"> </script> </head> <body> <input type="checkbox" id="aa" />全选<br /> <input type="checkbox" class="bb" />方式一 <input type="checkbox" class="bb" />方式二 <input type="checkbox" class="bb" />方式三 <input type="checkbox" class="bb" />方式四 </body> </html>
方法一：
<script> $(document).ready(function(e) { $("#aa").click(function () //全选功能方法一：通过点击事件，用循环使所有需要被选中的选项被选中 { var xx = $(".bb"); //找出所有要被选中的选项，放入一个变量中 var qx = $(this)[0].checked;//找到全选自身的选中状态，因为用到DOM对象中的checked功能，所以要取索引为0的对象 for(var i = 0;i<xx.length;i++) { xx[i].checked = qx; } }) }); </script>
方法二：
<script> $(document).ready(function(e) { $("#aa").click(function () //全选功能方法二：通过点击事件，调用prop操作checked属性 { var xx = $(".bb"); var qx = $(this)[0].checked; xx.prop("checked",qx); //注意：此方法中第一个参数为属性名，第二个参数为true或false; }) }); //此方法一般只用于checked属性操作，因为在jQurey中checked存在BUG，否则的话用添加移除属性方法则更为简便 </script>
方法三：
<script> $(document).ready(function(e) { $("#aa").click(function () { var xx = $(".bb"); var qx = $(this)[0].checked; if(qx) { xx.attr("checked","checked"); } else { xx.removeAttr("checked"); } }) });//如上所说，此方法没有问题，但就是无法显示，所以存在BUG </script>