input -多選 反選 不選
阿新 • • 發佈：2018-04-17
英語 col ack class input code end tex .get
<!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>
input -多選 反選 不選