<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 需求: 1.写三个按钮: 第一个全选 第二个取消全选 第三个反选 2.统计,当前选中了多少首歌曲:“当前选中9首,共14首” --> <script type="application/javascript"> function setALL(){//选择全选 var a = document.getElementsByName("song");//先获取input多选框 //获取的a是个数组,遍历这个数组,设置checked属性 for(var i = 0;i< a.length;i++){//因为获取到的是多个选择框,是数组类型的所以使用时需要将它们遍历出来 a[i].checked = true;//checked为true时是选中,false时是未选中,遍历的同时设置为选择状态 } getCount(); } function setNone(){//取消全选 var a=document.getElementsByName("song");//先获取input多选框 for(var i = 0; i<a.length;i++){//循环遍历 a[i].checked=false; } getCount(); } function setBack(){//反选 var c = document.getElementsByName("song");//先获取input多选框 for(var i = 0;i< c.length;i++){//循环遍历 if(c[i].checked==true){//if语句判断是否为选择状态,根据选择状态取反,整个if语句可用代替:c[i].checked = !c[i].checked; c[i].checked=false; }else{ c[i].checked=true; } } getCount(); } window.onload = function (){//事件:用户点击时触发,如选歌曲时 var allsongs = document.getElementsByName("song"); for (var i = 0; i < allsongs.length; i++) { allsongs[i].onclick = function(){ getCount(); } } } function getCount(){//方法用于计数歌曲 var counter = 0; var allsongs = document.getElementsByName("song"); for (var i = 0; i < allsongs.length; i++) {//循环 if (allsongs[i].checked) {//判断是否选中 counter++;//计数 } } document.getElementById("myDiv").innerText = "当前选中"+counter+"首歌曲,共"+allsongs.length+"首。"; } function setTow(type){//这是优化后的:将多个循环合并 var allsongs = document.getElementsByName("song"); for(var i =0;i<allsongs.length;i++){ if(type==0){ allsongs[i].checked = true; }else if(type==1){ allsongs[i].checked = false; }else if(type==2){ allsongs[i].checked = !allsongs[i].checked; } } getCount();//每次点击都调用计数方法 } </script> <input type="button" value="全选0" οnclick="setALL()"/> <input type="button" value="取消全选0" οnclick="setNone()"/> <input type="button" value="反选0" οnclick="setBack()"/> <hr/> <input type="button" value="全选1" οnclick="setTow(0)"/> <input type="button" value="取消全选1" οnclick="setTow(1)"/> <input type="button" value="反选1" οnclick="setTow(2)"/> <hr/> <input type="checkbox" name="song"/> 铁血丹心<br/> <input type="checkbox" name="song"/> 火<br/> <input type="checkbox" name="song"/> 大海<br/> <input type="checkbox" name="song"/> 好汉歌<br/> <input type="checkbox" name="song"/> 我们不一样<br/> <input type="checkbox" name="song"/> 成都<br/> <input type="checkbox" name="song"/> 半壶纱<br/> <input type="checkbox" name="song"/> 你还要我怎样<br/> <input type="checkbox" name="song"/> 一生所爱<br/> <input type="checkbox" name="song"/> 追光者<br/> <div id="myDiv"></div> </body> </html>
转载于:https://my.oschina.net/u/4118325/blog/3046073