This demo is suitable for comrades who are just learning jQuery.
On average, I eat a certain Licun rice roll 4 times a week at night, so the content is the ones I often order at night. Usually I eat for 14 yuan.
The effect is as shown:
##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">='food'</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">='全选' </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><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>
<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">='反选' </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><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>
1 <script src='./js/jquery.min.js'></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>
The above is the detailed content of Share jquery all selection and inverse selection examples. For more information, please follow other related articles on the PHP Chinese website!