四、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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。