码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现全选反选功能

时间:2017-06-24 15:25:44      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:class   ext   type   运行   cli   版本问题   20px   htm   status   

废话不说,直接上代码!

<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实现全选反选功能

标签:class   ext   type   运行   cli   版本问题   20px   htm   status   

原文地址:http://www.cnblogs.com/duck-ifox/p/7073401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!