Partager jquery tous les exemples de sélection et de sélection inverse

Cette démo convient aux camarades qui viennent d'apprendre jQuery.

En moyenne, je mange des petits pains de riz d'un certain Lycheon 4 fois par semaine le soir, le contenu est donc celui que je commande souvent le soir. Habituellement, je mange pour 14 yuans.

L'effet est comme indiqué ci-dessous :

Code HTML :

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

8元 红豆沙

5元 青菜肠

2元 加底     7元 鸡蛋青菜粥

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

 3元 卤蛋

<br><span style="color: #0000ff"><</span><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">=&#39;全选&#39; </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=&#39;selectAll&#39;</span><span style="color: #0000ff">></span><span style="color: #008080">13</span>     <span style="color: #0000ff"><</span><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">=&#39;全不选&#39; </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=&#39;unselectAll&#39;</span><span style="color: #0000ff">></span><span style="color: #008080">14</span>     

<br><span style="color: #0000ff"><</span><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">=&#39;反选&#39; </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=&#39;reverse&#39;</span><span style="color: #0000ff">></span><span style="color: #008080">15</span>     <span style="color: #0000ff"><</span><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">=&#39;获得选中的值&#39; </span><span style="color: #ff0000">id</span><span style="color: #0000ff">=&#39;getnum&#39;</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>

Code JS :

 1 <script src=&#39;./js/jquery.min.js&#39;></script> 2 <script> 3     //计算次数，当 #food 7个都选中时，#all 也选中 4     
 var num =0; 5     //#all 全选框选中时，#food 全部选中 6     $('#all').click(function(){ 7         
 if((this.checked)){ 8             $('#food :checkbox').prop('checked',true); 9         }else{10            
  $('#food :checkbox').prop('checked',false);11         }12     })13     //全选按钮14    
   $('#selectAll').click(function(){15         $(':checkbox').prop('checked',true);16         num = 7;17     })18    
   //全不选按钮19     $('#unselectAll').click(function(){20         $(':checkbox').prop('checked',false);21        
    num = 0;22     })23     //反选按钮24     $('#reverse').click(function(){25         var arr = [];26         
    $('#food :checkbox').each(function(){27             $(this).prop('checked',!$(this).prop('checked'));28         })
             $('#food>li>input').each(function(){30             if(this.checked){31                 
             arr.push($(this).val());32             }33         });34         num = arr.length;35         
             if(num == 7){36             $('#all').prop('checked',true);37         }else{38             
             $('#all').prop('checked',false);39         }40     })41     //获取价钱，显示出来42     
             $('#getnum').click(function(){43         getNum();44     });45     //全部#food框都选中时，#all 也选中46    
             $('#food :checkbox').click(function(){47         if(this.checked){48             num++;49         }else
             {             num--;51         }52         if(num == 7){53             
             $('#all').prop('checked',true);54         }else{55             $('#all').prop('checked',false);56         }
                  })58     //计算价钱59     function getNum(){60         var sum = 0;61         var arr = [];62         
                  $('#food>li>input').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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!