JavaScript全选取消反选 jQuery 以及三元运算版反选

最新推荐文章于 2018-06-20 23:18:00 发布

vastli

最新推荐文章于 2018-06-20 23:18:00 发布

阅读量510

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/vastli/article/details/68947146

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

MOD版

<!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版反选：

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)
    })
    }

vastli

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript全选取消反选 jQuery 以及三元运算版反选

MOD版<!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="反选"
复制链接

扫一扫