html 实现全选

最新推荐文章于 2024-08-10 12:19:42 发布

LYH_VIP

最新推荐文章于 2024-08-10 12:19:42 发布

阅读量1.6k

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/DL_min/article/details/62229917

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在实习，做页面，需要涉及到全选，学习了

<thead>
                <tr>
                    <th style="width:5px;">
                        <input type="checkbox" οnclick="swapCheck()" />
                    </th>
                    <th>URL</th>
                    <th style="width: 80px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="data-row" data="http://shanghai.anjuke.com/tycoon/?from=navigation">
                    <td>
                        <input name="urlCk" type="checkbox">
                    </td>
                    <td class="startUrl">
                        http://shanghai.anjuke.com/tycoon/?from=navigation
                    </td>
                    <td>
                        <button class="btn btn-sm btn-default" οnclick="deleteUrl(this)">删除</button>
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr class="data-row" data="https://github.com/">
                    <td>
                        <input name="urlCk" type="checkbox" >
                    </td>
                    <td class="startUrl">
                        https://github.com/
                    </td>
                    <td>
                        <button class="btn btn-sm btn-default" οnclick="deleteUrl(this)">删除</button>
                    </td>
                </tr>
            </tbody>

<script type="text/javascript"
src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

//checkbox 全选/取消全选
var isCheckAll = false;
function swapCheck() {
if (isCheckAll) {
$("input[type='checkbox']").each(function () {
this.checked = false;
});
isCheckAll = false;
} else {
$("input[type='checkbox']").each(function () {
this.checked = true;
});
isCheckAll = true;
}
}
</script>