8 Yuan rot"/> 8 Yuan rot">

Heim  >  Artikel  >  Web-Frontend  >  Teilen Sie jquery alle Auswahl- und Umkehrauswahlbeispiele

Teilen Sie jquery alle Auswahl- und Umkehrauswahlbeispiele

零下一度
零下一度Original
2017-06-26 10:19:521431Durchsuche

Diese Demo ist für Kameraden geeignet, die jQuery gerade erst lernen.

Im Durchschnitt esse ich 4 Mal pro Woche abends Reisröllchen von einem bestimmten Lycheon, der Inhalt ist also der, den ich oft abends bestelle. Normalerweise esse ich für 14 Yuan.

Der Effekt ist wie folgt:

HTML-Code:

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

JS-Code:

 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>

Das obige ist der detaillierte Inhalt vonTeilen Sie jquery alle Auswahl- und Umkehrauswahlbeispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn