反选

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <input class="like" type="checkbox">足球
  11.     <input class="like" type="checkbox">篮球
  12.     <input class="like" type="checkbox">排球
  13.     <input class="like" type="checkbox">游泳  <br>
  14.     <button id="reverse">反选</button>
  16.     <script>
  17.         /* 
  18.         input输入框有属性checked
  19.         true  选中
  20.         false 没有选中
  21.          */
  22.         var inputs = document.getElementsByClassName("like");
  24.         var reverse = document.getElementById("reverse");
  25.         reverse.onclick = function(){
  26.             for(var i=0;i<inputs.length;i++){
  27.                 console.log(inputs[i].checked)
  28.                 // if(inputs[i].checked ==  true){
  29.                 //     inputs[i].checked = false;
  30.                 // }else{
  31.                 //     inputs[i].checked = true;
  32.                 // }
  33.                 inputs[i].checked = (inputs[i].checked ==  true)? false:true;
  34.             }
  35.         }
  36.     </script>
  37. </body>
  38. </html>

奇偶数变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         /* 
  10.         1
  11.         odd 奇数  
  12.         even 偶数
  13.          */
  14.         /* li:nth-child(odd){
  15.             color:red;
  16.         }
  17.         li:nth-child(even){
  18.             color:orange;
  19.         } */
  20.     </style>
  21. </head>
  22. <body>
  23.     <ul>
  24.         <li>0</li>
  25.         <li>1</li>
  26.         <li>2</li>
  27.         <li>3</li>
  28.         <li>4</li>
  29.         <li>5</li>
  30.         <li>6</li>
  31.         <li>7</li>
  32.         <button id="one">所有偶数的颜色变red</button>
  33.         <button id="two">所有奇数的颜色变orange</button>
  34.         <script>
  35.             /* 0 */
  36.             var lis = document.getElementsByTagName("li");
  37.             var one = document.getElementById("one");
  38.             var two = document.getElementById("two");
  39.             one.onclick = function(){
  40.                 for(var i=0;i<lis.length;i++){
  41.                     if(i%2==0){
  42.                         lis[i].style.color="red"
  43.                     }
  44.                 }
  45.             }
  46.             two.onclick = function(){
  47.                 for(var i=0;i<lis.length;i++){
  48.                     if(i%2!=0){
  49.                         lis[i].style.color="orange"
  50.                     }
  51.                 }
  52.             }
  53.         </script>
  54.     </ul>
  55. </body>
  56. </html>