摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表文章全选生成列成ID </title> &n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表文章全选生成列成ID </title> <style type="text/css"> .test{margin:5px auto; width:200px;height:300px;background:#fff;border:1px solid #000;border-radius:10px;} .inner{margin:8px 5px; border-bottom:1px #ccc solid;} .inner input{padding:8px 8px;} .innerlist{margin:5px 5px;} .innerlist input{padding:8px 8px;} </style> <script type="text/javascript"> function checkall(){ var checkitem,item,val=""; checkitem=document.getElementById('checkall'); item=document.getElementsByName('item[]'); //document.write(item);//输出后为[object NodeList],用for输出内容 for (var i = 0; i < item.length; i++) { if(checkitem.checked){ item[i].checked=true;//设置选择 val+=item[i].value + ',';//生成列表ID字符串 }else{ item[i].checked=false;//设置无效 } }; //document.write(val);可以列表ID输出字符串 } </script> </head> <body> <div class="test"> <div class="inner"> <input type="checkbox" id="checkall" onclick="checkall()"> <label for="checkall">全选</label> </div> <div class="innerlist"> <input type="checkbox" name="item[]" value="1" /> 新闻列表1 </div> <div class="innerlist"> <input type="checkbox" name="item[]" value="2" /> 新闻列表2 </div> <div class="innerlist"> <input type="checkbox" name="item[]" value="3" /> 新闻列表3 </div> <div class="innerlist"> <input type="checkbox" name="item[]" value="4" /> 新闻列表4 </div> </div> </body> </html>
批改老师:韦小宝批改时间:2018-11-16 11:06:20
老师总结:嗯!不错!但是缺少自己的总结!下次记得带上,课后还得多多练习啊!!