8 yuans rouge"/> 8 yuans rouge">

Maison  >  Article  >  interface Web  >  Partager jquery tous les exemples de sélection et de sélection inverse

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

零下一度
零下一度original
2017-06-26 10:19:521422parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn