jQuery 之多选反选取消实例

最新推荐文章于 2024-07-22 08:55:10 发布

weixin_33682790

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量124

点赞数

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/12965094/2372992

版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.js"></script>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th style="text-align: center">选择</th>
            <th style="text-align: center">IP</th>
            <th style="text-align: center">端口</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>1.1.1.1</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2.2.2.2</td>
            <td>80</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3.3.3.3</td>
            <td>80</td>
        </tr>
        </tbody>
    </table>
    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverseAll()">
    <input type="button" value="取消" onclick="cancleAll()">
    <script>
        function checkAll() {
//            把checkbox的checked值设置为true
            $(':checkbox').prop('checked',true)
//            $(':checkbox').prop('checked'）为获取值
        }
        function cancleAll() {
//            把checkbox的checked值设置为false
            $(':checkbox').prop('checked',false)
//            $(':checkbox').prop('checked'）为获取值
        }
        function reverseAll() {
            $(':checkbox').each(function (k) {
                // k当前索引
                // this,DOM元素，当前循环的元素$(this)
                if(this.checked)
                {
                    this.checked = false;
                }
                else{
                    this.checked = true;
                }
            })
        }
    </script>

</body>
</html>

展示：

jQuery 之多选反选取消实例

转载于:https://blog.51cto.com/12965094/2372992

weixin_33682790

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 之多选反选取消实例

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.js"></script></head>&lt...
复制链接

扫一扫