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

jQuery实现复选框的全选、反选和不选功能

时间:2017-08-24 16:12:06      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:none   close   meta   nbsp   type   html   bsp   去哪儿   text   

 

技术分享
<!doctype html><html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现复选框的全选、反选和不选功能</title>
 <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
</head>
<style type="text/css">
    .shows{
        display: none;
    }    
</style>
<body>
<ul id="list">  
   <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li>
   <li><label><input type="checkbox" value="2"> 2.海阔天空</label></li>
   <li><label><input type="checkbox" value="3"> 3.真的爱你</label></li>
   <li><label><input type="checkbox" value="4"> 4.不再犹豫</label></li>
   <li><label><input type="checkbox" value="5"> 5.光辉岁月</label></li>
   <li><label><input type="checkbox" value="6"> 6.喜欢妳</label></li>
</ul>
<input type="checkbox" id="all">
<input type="button" value="全选" class="btn" id="selectAll">  
<input type="button" value="全不选" class="btn" id="unSelect">  
<input type="button" value="反选" class="btn" id="reverse">  
<input type="button" value="获得选中的所有值" class="btn" id="getValue">
 
<script type="text/javascript">
     $("#all").click(function(){   
        if(this.checked){   
            $("#list :checkbox").prop("checked", true);  
        }else{   
            $("#list :checkbox").prop("checked", false);
        }   
     });
</script>
</body>
</html>
View Code

 

 

——————————

jQuery实现复选框的全选、反选和不选功能

标签:none   close   meta   nbsp   type   html   bsp   去哪儿   text   

原文地址:http://www.cnblogs.com/cuizhenyu/p/7423465.html

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