<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 1000px; height: 200px; background-color: lavender; box-shadow: 5px 5px 2px lightblue; } button{ margin-left: 20px; } .ys{ border: 1px solid yellow; height: 50px; width: 50px; margin-left: 5px; float: left; } .ys1{ border: 1px solid yellow; height: 50px; width: 50px; margin-left: 5px; float: left; } </style> </head> <body> <input type="checkbox" id="qx" value="" onclick="qx()"/>全选 <input type="checkbox" id="fx" value="" onclick="fx()" />反选 <input type="checkbox" name="xz" id="" value="语文" />语文 <input type="checkbox" name="xz" id="" value="数学" />数学 <input type="checkbox" name="xz" id="" value="英语" />英语 <input type="checkbox" name="xz" id="" value="物理" />物理 <input type="checkbox" name="xz" id="" value="化学" />化学 <input type="checkbox" id="bx" value="" onclick="bx()"/>不选 <br /> <div id=""> while循环 <br /> <br /> <button onclick="five()">循环出现提示框5次</button> </div> <br /> <br /> <br /> <div id=""> for循环 <br /> <br /> <button onclick="ys11()">批量修改样式</button> <br /> <br /> <br /> <div class="ys"></div> <div class="ys"></div> <div class="ys"></div> <div class="ys"></div> </div> <br /> <br /> <br /> <div id=""> for循环 <br /> <br /> <button onclick="ys12()">批量修改样式可循环</button> <br /> <br /> <br /> <div class="ys1"></div> <div class="ys1"></div> <div class="ys1"></div> <div class="ys1"></div> </div> </body> </html> <script type="text/javascript"> function fx(){ var fx = document.getElementById("fx"); var attr = document.getElementsByName("xz"); for(var i = 0; i<attr.length;i++){ if(fx.checked){ if(attr[i].checked){ attr[i].checked = false; } else{ attr[i].checked = true; } } else{ if(attr[i].checked){ attr[i].checked = false; } else{ attr[i].checked = true; } } } } function qx(){ var qx = document.getElementById("qx"); var attr = document.getElementsByName("xz"); for(var i = 0;i<attr.length;i++){ if(qx.checked){ attr[i].checked = true; } else{ attr[i].checked = false; } } } function bx(){ var bx = document.getElementById("bx"); var attr = document.getElementsByName("xz"); if(bx.checked){ for(var i = 0;i<attr.length;i++){ attr[i].checked=false; } } } function five(){ for(var i = 1;i<=5;i++){ alert("这是第"+i+"次弹出"); } } function ys11(){ var attr = document.getElementsByClassName("ys"); for(i = 0;i<attr.length;i++){ attr[i].style.backgroundColor = "yellow"; } } function ys12(){ var attr = document.getElementsByClassName("ys1"); for(i = 0;i<attr.length;i++){ if(attr[i].style.backgroundColor=="yellow"){ attr[i].style.backgroundColor = "lavender"; } else{ attr[i].style.backgroundColor="yellow"; } } } </script>