摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择框练习</title> <style type="text/css"> .check div{ border:&
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择框练习</title> <style type="text/css"> .check div{ border: 1px solid red; border-radius: 5px; padding: 10px; } .check div p{ margin-bottom: 5px; border-bottom: 1px solid #552; } .check div p i{ float: right; } </style> <script type="text/javascript"> function checkAll(){ var check,allBox,xq; allBox=document.getElementById('allBox'); check=document.getElementsByName('check'); xq=document.getElementById('xq'); for (var i = 0; i < check.length; i++) { if (allBox.checked) { check[i].checked=true; xq.innerHTML="全不选"; }else{ check[i].checked=false; xq.innerHTML="全选"; } } } </script> </head> <body> <div> <div> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-28</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p><input type="checkbox" name="check"><a href="#">选择框的运用</a><i>发布时间:2018-12-29</i></p> <p> <input type="checkbox" id="allBox" onclick=" checkAll()"><label for="allBox"><span id="xq">全选</span></label> <input type="checkbox" id="noBox" onclick="noCheck()"><label for="noBox">反选</label> </p> </div> </div> </body> </html>
批改老师:天蓬老师批改时间:2019-01-01 15:18:26
老师总结:var check,allBox,xq; 在函数头部,一次生的声明变量,是一个不错的好习惯