Simple jquery All-in-election case

This demo is suitable for those who have just learned jquery.

One weeks on average, 4 times a night to eat a certain Lai village sausage powder, so the content is what I often eat at night. I usually eat 14 dollars.

Effect

HTML code:

1 <ulID= ' food '>2     <Li><inputtype= "checkbox"value= ' 8 '>8 USD Red Bean sand</Li>3     <Li><inputtype= "checkbox"value= ' 5 '>5 Yuan Cabbage Sausage</Li>4     <Li><inputtype= "checkbox"value= ' 2 '>2 USD plus Bottom</Li>5     <Li><inputtype= "checkbox"value= ' 7 '>7 Yuan congee with egg and vegetables</Li>6     <Li><inputtype= "checkbox"value= ' 6 '>6 USD White fresh vegetables</Li>7     <Li><inputtype= "checkbox"value= ' 7 '>7 Yuan Golden Pumpkin Porridge</Li>8     <Li><inputtype= "checkbox"value= ' 3 '>3 Yuan Braised egg</Li>9 </ul>Ten <Div> One     <inputtype= "checkbox"ID= ' All '> A     <inputtype= "button"value= ' Select All 'ID= ' SelectAll '> -     <inputtype= "button"value= ' All not selected 'ID= ' Unselectall '> -     <inputtype= "button"value= ' Reverse selection 'ID= ' reverse '> the     <inputtype= "button"value= ' Get selected value 'ID= ' Getnum '> - </Div>

JS Code:

1<script src= './js/jquery.min.js ' ></script>2<script>3     //number of calculations, when #food 7 are selected, #all also selected4     varNum =0;5     //when #all Select All box, #food all selected6$ (' #all '). Click (function(){7         if(( This. Checked)) {8$ (' #food: CheckBox '). Prop (' checked ',true);9}Else{Ten$ (' #food: CheckBox '). Prop (' checked ',false); One         } A     }) -     //Select All button -$ (' #selectAll '). Click (function(){ the$ (': CheckBox '). Prop (' checked '),true); -num = 7; -     }) -     //all buttons are not selected +$ (' #unselectAll '). Click (function(){ -$ (': CheckBox '). Prop (' checked '),false); +num = 0; A     }) at     //Inverse selection button -$ (' #reverse '). Click (function(){ -         vararr = []; -$ (' #food: CheckBox '). each (function(){ -$( This). Prop (' Checked ',!$ ( This). Prop (' checked ')); -         }) in$ (' #food >li>input '). each (function(){ -             if( This. Checked) { toArr.push ($ ( This). Val ()); +             } -         }); thenum =arr.length; *         if(num = = 7){ $$ (' #all '). Prop (' checked ',true);Panax Notoginseng}Else{ -$ (' #all '). Prop (' checked ',false); the         } +     }) A     //get the price, show it the$ (' #getnum '). Click (function(){ + getnum (); -     }); $     //when all #food boxes are selected, #all also select $$ (' #food: CheckBox '). Click (function(){ -         if( This. Checked) { -num++; the}Else{ -num--;Wuyi         } the         if(num = = 7){ -$ (' #all '). Prop (' checked ',true); Wu}Else{ -$ (' #all '). Prop (' checked ',false); About         } $     }) -     //Calculate the price -     functionGetnum () { -         varsum = 0; A         vararr = []; +$ (' #food >li>input '). each (function(){ the             if( This. Checked) { -                 //takes value, as a string, to a number $Arr.push (Number ($ ( This). Val () )); the             } the         }); the         //iterate through an array, take a fit theArr.foreach (function(i) { -Sum + =i; in         }) theAlert ("Total:" + sum + "meta")); the     } About  the</script>

Simple jquery All-in-election case