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

时间 2019-12-23
原文原文链接
这个地址更权威：最好的选择：http://www.sucaihuo.com/js/10.htmljavascript
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    </head>
    <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"> 
        <span id="total"></span>
    </body>
</html>
<script>
    /*
    $(doucument).ready(function(){
       alert(); 
    });
    */
   $(function(){
       /**
        * 全选
        */
       $("#selectAll").click(function(){
            $("#list :checkbox,#all").attr("checked",true);  
            allchk();
       });
       /**
        * 取消全选
        */
       $("#unSelect").click(function(){
           $("#list :checkbox,#all").attr("checked",false);
       });
       /**
        * 反选
        */
       $("#reverse").click(function(){
           $("#list :checkbox").each(function(){
               $(this).attr("checked",!$(this).attr("checked"));
           });
       });
       /**
        * 获取全部选中框的值
        */
       $("#getValue").click(function(){
           var data1 = new Array;
           var total = 0;
           $("#list :checkbox[checked]").each(function(i){
               data1[i] = $(this).val();
               total++;
           });
          var data2 = data1.join(',');  //将数组转换成字符串
          alert(data2+"总共："+total);
       });
   });
</script>
1.时间都去哪儿了html
2.海阔天空java
3.真的爱你jquery
4.再也不犹豫数组
5.光辉岁月this
6.喜欢妳spa