jQuery实现全选反选功能

废话不说，直接上代码！
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

<title>Insert title here</title>

</head>

<body>

<div style="margin: 20px;">

        全选：<input type="checkbox" id="selectAll" onclick="selects1()">

    </div>

<div style="width:600px;height: 40px;border: 1px solid #ccc">

    多选框1：<input type="checkbox" class="check_class">

    多选框2：<input type="checkbox" class="check_class">

    多选框3：<input type="checkbox" class="check_class">

    多选框4：<input type="checkbox" class="check_class">

    多选框5：<input type="checkbox" class="check_class">

    多选框6：<input type="checkbox" class="check_class">

</div><br>

<script type="text/javascript">

/*

 * 方法1 在工作电脑和本地电脑都可以正常工作

 * 方法2 在工作电脑只起一次作用，即勾选全选，反选后。再次勾选，不再起作用。本地电脑一样可以正常运行

 * 可能原因是jquery版本问题 ? 工作电脑jQuery版本为1.11系列。这里为3.1.1

 */

    //实现方法1

    function selects1(){

        //实现全选，反选功能

        var selectStatus = $('#selectAll').is(':checked');

        $('.check_class').each(function(){

            $(this).prop('checked',selectStatus);

        });

    }

    //实现方法2

    function selects2(){

        //实现全选，反选功能

        var selectStatus = $('#selectAll').is(':checked');

        $('.check_class').each(function(){

            $(this).attr('checked',selectStatus);

        });

    }

</script>

</html>
秒客网

jQuery实现全选反选功能

相关文章
