分享jquery全選反選實例

本demo適合剛學習jQuery的戰友學習。

一個星期平均有4次晚上是吃  某荔村腸粉，所以內容物就是我晚上常點吃的那些。一般我都是吃14塊。

效果如圖：

# 

# 

# 

###################################################################################################################### # ##HTML程式碼：######

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">ul </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='food'</span><span style="color: #0000ff">></span><span style="color: #008080"> 2</span>     </span>

8元 红豆沙

5元 青菜肠

2元 加底     7元 鸡蛋青菜粥

6元 白灼鲜蔬菜     7元 黄金南瓜粥

 3元 卤蛋

<br><span style="color: #0000ff"><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='全选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='selectAll'</span><span style="color: #0000ff">></span><span style="color: #008080">13</span>     <span style="color: #0000ff"><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='全不选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='unselectAll'</span><span style="color: #0000ff">></span><span style="color: #008080">14</span>     </span></span>

<br><span style="color: #0000ff"><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='反选' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='reverse'</span><span style="color: #0000ff">></span><span style="color: #008080">15</span>     <span style="color: #0000ff"><span style="color: #800000">input </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="button"</span><span style="color: #ff0000"> value</span><span style="color: #0000ff">='获得选中的值' </span><span style="color: #ff0000">id</span><span style="color: #0000ff">='getnum'</span><span style="color: #0000ff">></span><span style="color: #008080">16</span> <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">><br><br><br></span></span></span>

###### ######JS程式碼：######

 1 <script></script> 2 <script> 3     //计算次数，当 #food 7个都选中时，#all 也选中 4     
 var num =0; 5     //#all 全选框选中时，#food 全部选中 6     $(&#39;#all&#39;).click(function(){ 7         
 if((this.checked)){ 8             $(&#39;#food :checkbox&#39;).prop(&#39;checked&#39;,true); 9         }else{10            
  $(&#39;#food :checkbox&#39;).prop(&#39;checked&#39;,false);11         }12     })13     //全选按钮14    
   $(&#39;#selectAll&#39;).click(function(){15         $(&#39;:checkbox&#39;).prop(&#39;checked&#39;,true);16         num = 7;17     })18    
   //全不选按钮19     $(&#39;#unselectAll&#39;).click(function(){20         $(&#39;:checkbox&#39;).prop(&#39;checked&#39;,false);21        
    num = 0;22     })23     //反选按钮24     $(&#39;#reverse&#39;).click(function(){25         var arr = [];26         
    $(&#39;#food :checkbox&#39;).each(function(){27             $(this).prop(&#39;checked&#39;,!$(this).prop(&#39;checked&#39;));28         })
             $(&#39;#food>li>input&#39;).each(function(){30             if(this.checked){31                 
             arr.push($(this).val());32             }33         });34         num = arr.length;35         
             if(num == 7){36             $(&#39;#all&#39;).prop(&#39;checked&#39;,true);37         }else{38             
             $(&#39;#all&#39;).prop(&#39;checked&#39;,false);39         }40     })41     //获取价钱，显示出来42     
             $(&#39;#getnum&#39;).click(function(){43         getNum();44     });45     //全部#food框都选中时，#all 也选中46    
             $(&#39;#food :checkbox&#39;).click(function(){47         if(this.checked){48             num++;49         }else
             {             num--;51         }52         if(num == 7){53             
             $(&#39;#all&#39;).prop(&#39;checked&#39;,true);54         }else{55             $(&#39;#all&#39;).prop(&#39;checked&#39;,false);56         }
                  })58     //计算价钱59     function getNum(){60         var sum = 0;61         var arr = [];62         
                  $(&#39;#food>li>input&#39;).each(function(){63             if(this.checked){64                
                   //取value值，为字符串，转为数字65                arr.push(Number($(this).val()));66             }
                            });68         //遍历数组，取合69         arr.forEach(function(i){70             
                            sum += i;71         })72         alert("总共："+ sum + "元");73     }
                             </script>

###### ####

以上是分享jquery全選反選實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！