checkbox全选和取消，附带单击表格tr选中功能

最新推荐文章于 2018-12-03 10:32:23 发布

北山飞天

最新推荐文章于 2018-12-03 10:32:23 发布

阅读量936

点赞数

文章标签： checkbox全选点击tr选中 input全选 js实现checkbox全选

本文链接：https://blog.csdn.net/yao8513277/article/details/80844085

版权

这个示例展示了如何在HTML表格中使用JavaScript（jQuery）实现checkbox全选和取消全选的功能，并且当点击表格行时，该行会被选中。通过点击全选按钮，所有checkbox被勾选；点击取消按钮，所有checkbox被取消。此外，实现了单击表格行时，行会切换选中状态，同时对应的checkbox也会进行相应的选中或取消选中操作。

摘要由CSDN通过智能技术生成

<html>
<head>
test
</head>
<body>
<table width="300px" border="1">
    <tr>
        <th>
            <input type="button" style="display:block" id="selectAll" value="全选">
            <input type="button" style="display:none" id="closeAll" value="取消">
        </th>
    </tr>
    <tr><td><input type="checkbox" name="checkbox" /></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
    <tr><td><input type="checkbox" name="checkbox"/></td><td>2</td><td>1</td></tr>
</table>
</body>
</html>
<script type="text/javascript" src="../../../static/application/js/jquery.min.js"></script>
<script>
    jQuery(function($){
        $("#selectAll").click(function(){
            $("input[name='checkbox']").prop("checked","true");
            document.getElementById("closeAll").style.display="block";
            document.getElementById("selectAll").style.display="none";
        })
        $("#closeAll").click(function(){
            $("input[name='checkbox']").prop("checked",false);
            document.getElementById("selectAll").style.display="block";
            document.getElementById("closeAll").style.display="none";
        })
    })
    /**
     * 点击表格选中
     */
    $(function () {
        //除了表头（第一行）以外所有的行添加click事件.
        $("tr").slice(1).click(function () {
            // 切换样式
            $(this).toggleClass("tr_active");
            // 找到checkbox对象
            var chks = $("input[type='checkbox']",this);
            var tag = $(this).attr("tag");
            if(tag=="selected"){
                // 之前已选中，设置为未选中
                $(this).attr("tag","");
                chks.prop("checked",false);
            }else{
                // 之前未选中，设置为选中
                $(this).attr("tag","selected");
                chks.prop("checked",true);
            }
        });
    });
</script>