使用jquery全选和反选的效果

最新推荐文章于 2024-01-23 19:19:19 发布

小天空happy

最新推荐文章于 2024-01-23 19:19:19 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： checkbox jquery 遍历全选反选

本文链接：https://blog.youkuaiyun.com/qq_16872369/article/details/42738609

jquery 专栏收录该内容

2 篇文章

订阅专栏

<!--使用jquery全选和反选的效果,不用很久后容易忘记-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>  
  </head>  
  <body>  
    <table border="1" align="center">  
        <tr>  
            <th>状态</th>  
            <th>用户名</th>  
        </tr>  
        <tr>  
            <td><input id="z" type="checkbox"/></td>  
            <td>赵</td>  
        </tr>  
        <tr>  
            <td><input type="checkbox"/></td>  
            <td>钱</td>  
        </tr>       
        <tr>  
            <td><input type="checkbox"/></td>  
            <td>孙</td>  
        </tr>   
        <tr>  
            <td><input type="checkbox"/></td>  
            <td>李</td>  
        </tr>  
        <tr>  
            <td><input type="checkbox"/></td>  
            <td>周</td>  
        </tr>   
        <tr>  
            <td><input type="button" value="全选中"/></td>  
            <td><input type="button" value="全取消"/></td>  
            <td><input type="button" value="全反选"/></td>  
        </tr>       
    </table>  
    <script type="text/javascript">  
        $("input[type=button]:eq(0)").click(function(){  
            $("input[type=checkbox]").attr("checked",true);  
            $(this).attr("disabled","true");  
            $("input[type=button]:eq(1)").removeAttr("disabled");  
        });  
          
        $("input[type=button]:eq(1)").click(function(){  
            $("input[type=checkbox]").attr("checked", false);  
            $(this).attr("disabled","disabled");  
            $("input[type=button]:eq(0)").removeAttr("disabled");  
        });  
          
        $("input[type=button]:eq(2)").click(function(){  
            $(":checkbox").each(function(index,domEle){  
                $(domEle).attr("checked",!($(domEle).prop("checked")));//遍历每个checkbox组件,把checked属性设置成相反值，注意这里如果使用attr的话取得的是undefined。  
            });  
        });  
    </script>  
  </body>  
</html>