• value 用于大部分表单元素的内容获取(option除外)
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中属性

    案例1.点击按钮禁用文本框

  1. <input type="button" value="禁用文本框" id="btn"/>
  2. <input type="text" value="文本框" id="txt"/>
  3. //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
  4. document.getElementById("btn").onclick=function () {
  5.     //根据id获取文本框,设置disabled属性
  6.     document.getElementById("txt").disabled=true;
  7. };

案例2：点击按钮选择菜单

  1. <input type="button" value="点菜" id="btn"/>
  2. <select name="" id="ss">
  3.   <option value="1">油炸榴莲</option>
  4.   <option value="2">爆炒臭豆腐</option>
  5.   <option value="3">清蒸</option>
  6.   <option value="4" id="op1">凉拌班主任</option>
  7.   <option value="5">红烧</option>
  8. </select>
  9. <script>
  10.   function my$(id) {
  11.     return document.getElementById(id);
  12.   }
  13.   my$("btn").onclick=function () {
  14.     //点击按钮选择菜
  15.     my$("op1").selected=true;
  16.   };
  17. </script>

test.gif
//注意点：如果要在下一个script标签中引用其他script标签中的函数，得让其他script标签写在前面

案例3.点击按钮修改性别和兴趣

  1. <body>
  2. <input type="button" value="修改性别" id="btn1"/>
  3. <input type="radio" value="1" name="sex"/>男
  4. <input type="radio" value="2" name="sex" id="rad1"/>女
  5. <input type="radio" value="3" name="sex"/>保密
  6. <script>
  8.   //规律:在表单标签中,如果属性和值只有一个,并且值是这个属性本身,那么
  9.   //那么,在写js代码,DOM操作的时候,这个属性值,是布尔类型就可以了
  10.   my$("btn1").onclick = function () {
  11.     my$("rad1").checked = true;
  12.   };
  13. </script>
  14. <br />
  15. <input type="button" value="选择兴趣" id="btn2"/>
  16. <input type="checkbox" value="1" name="xingqu" />吃饭
  17. <input type="checkbox" value="2" name="xingqu" />睡觉
  18. <input type="checkbox" value="3" name="xingqu" id="ck1" />打豆豆
  19. <input type="checkbox" value="4" name="xingqu" />打篮球
  20. <input type="checkbox" value="5" name="xingqu" />打足球
  21. <input type="checkbox" value="6" name="xingqu" id="ck2" />打铅球
  22. <script>
  23.   my$("btn2").onclick=function () {
  24.     my$("ck1").checked=true;
  25.     my$("ck2").checked=true;
  26.   };
  27. </script>
  28. </body>
  29. //注意：这里可以将my$的函数封装到common.js中

案例4 : 全选全不选

  1. <table>
  2.     <thead>
  3.         <tr>
  4.           <th>
  5.             <input type="checkbox" id="j_cbAll"/>
  6.           </th>
  7.           <th>菜名</th>
  8.           <th>饭店</th>
  9.         </tr>
  10.     </thead>
  11.     <tbody id="j_tb">
  12.         <tr>
  13.           <td>
  14.             <input type="checkbox"/>
  15.           </td>
  16.           <td>红烧肉</td>
  17.           <td>田老师</td>
  18.         </tr>
  19.         <tr>
  20.           <td>
  21.             <input type="checkbox"/>
  22.           </td>
  23.           <td>西红柿鸡蛋</td>
  24.           <td>田老师</td>
  25.         </tr>
  26.         <tr>
  27.           <td>
  28.             <input type="checkbox"/>
  29.           </td>
  30.           <td>油炸榴莲</td>
  31.           <td>田老师</td>
  32.         </tr>
  33.         <tr>
  34.           <td>
  35.             <input type="checkbox"/>
  36.           </td>
  37.           <td>清蒸助教</td>
  38.           <td>田老师</td>
  39.         </tr>
  40.     </tbody>
  41. </table>
  42. <script>
  43.   //获取全选的这个复选框
  44.   var ckAll = my$("j_cbAll");
  45.   //获取tbody中所有的小复选框
  46.   var cks = my$("j_tb").getElementsByTagName("input");
  47.   //点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
  48.   ckAll.onclick = function () {
  49.     //console.log(this.checked);
  50.     for (var i = 0; i < cks.length; i++) {
  51.       cks[i].checked = this.checked;
  52.     }
  53.   };
  54.   //获取tbody中所有的复选框,分别注册点击事件
  55.   for(var i=0;i<cks.length;i++){
  56.     cks[i].onclick=function () {
  57.       var flag=true;//默认都被选中了
  58.       //判断是否所有的复选框都选中
  59.       for(var j=0;j<cks.length;j++){
  60.         if(!cks[j].checked){
  61.           //没选中就进来了
  62.           flag=false;
  63.           break;
  64.         }
  65.       }
  66.       //全选的这个复选框的状态就是flag这个变量的值
  67.       ckAll.checked=flag;
  68.     };
  69.   }
  70. </script>

test.gif