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

<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.时间都去哪儿了

  • 2.海阔天空

  • 3.真的爱你

  • 4.不再犹豫

  • 5.光辉岁月

  • 6.喜欢妳


你可能感兴趣的:(4、jQuery实现的全选、反选和不选功能)