JQury中全选全不选

简介: JQury中全选全不选

1.因为全选按钮已经绑定了点击事件,所以直接写成一个方法,

2. //因为checked选中是固有属性所以用的是prop()方法


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script  src="../../js/jquery-3.3.1.min.js"></script>
    <script>
            function selectAll(obj) {
                //获取下面的复选框状态
                //因为checked选中是固有属性所以用的是prop
                $(".itemSelect").prop("checked",obj.checked);
            }
    </script>
  </head>
  <body>
    <table id="tab1" border="1" width="800" align="center" >
      <tr>
        <td colspan="5"><input type="button" value="删除"></td>
      </tr>
      <tr>
        <th><input  type="checkbox" onclick="selectAll(this)" ></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
      </tr>
      <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
      </tr>
      <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
      </tr>
    </table>
  </body>
</html>
相关文章
|
3月前
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
61 1
|
6月前
单选、全选、反选、获得所有选中的checkbox
单选、全选、反选、获得所有选中的checkbox
|
9月前
|
JavaScript 前端开发
一行jQuery代码搞定checkbox 全选和全不选
一行jQuery代码搞定checkbox 全选和全不选
|
10月前
|
JavaScript
原生js实现全选全不选
原生js实现全选全不选
31 0
|
JavaScript 前端开发
单选与全选
结合table表格和checkbox复选框实现单选与全选功能(本文只考虑功能实现,样式不要在意,虽然极丑,但我看不到 φ(>ω<*) )。
单选与全选
|
JavaScript
全选,全不选,反选,批量操作
js $(function () { var $choose = $("#choose input"); $("#all").click(function () { $choose.
1189 0
|
JavaScript 前端开发 Java