码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 实现全选,反选,取消

时间:2017-03-27 18:43:18      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:input   har   reserve   doctype   eal   3.1.1   tab   代码   tle   

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="全选"  onclick="checkAll()" />
 <input type="button" value="反选" onclick="reserveAll()" />
 <input type="button" value="取消" onclick="cancleAll()"/>


    <table border="1">
        <thead>
        <tr><th>选择</th>
            <th>id </th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="tb">
        <tr>
            <td> <input type="checkbox"/></td>
            <td>1</td>
            <td>lcg</td>
            <td>22</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td>lcg2</td>
            <td>23</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>3</td>
            <td>lcg3</td>
            <td>24</td>
        </tr>
        </tbody>
    </table>

<script src="jquery-3.1.1.js" ></script>
<script>
    function checkAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,true);
    }
    function cancleAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,false)
    }
    function reserveAll(){
        $(‘#tb :checkbox‘).each(function(){
            if (this.checked){
                this.checked=false
            }else this.checked=true
        })
    }
</script>
</body>
</html>

技术分享

JQuery 版反选(上面是mod版)

function reserveAll(){
        $(‘#tb :checkbox‘).each(function() {
            if ($(this).prop(‘checked‘)) {
                $(this).prop(‘checked‘, false);
            }
            else {
                $(this).prop(‘checked‘, true);
            }
         })
        }

三元运算版反选

    function cancleAll(){
        $(‘#tb :checkbox‘).prop(‘checked‘,false)
    }

        function reserveAll(){
        $(‘#tb :checkbox‘).each(function() {
        var v= $(this).prop(‘checked‘)?false:true;
            $(this).prop(‘checked‘,v)
        })
        }

技术分享

jQuery 实现全选,反选,取消

标签:input   har   reserve   doctype   eal   3.1.1   tab   代码   tle   

原文地址:http://www.cnblogs.com/lcgsmile/p/6627947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!