posts - 104,  comments - 34,  trackbacks - 0

          在批量處理列表數(shù)據(jù)時,往往會用到 CheckBox 的全選與取消全選,雖然她的實現(xiàn)原理很簡單,但是對新手來說還是有些難度,本文介紹的方法,觸發(fā)條件獨立,可以全選或取消全選指定 name 的 CheckBox , 同一頁面可以有多組供全選的 CheckBox ,功能健全,通用性較強。

          <input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" />
          字母全選開關(guān)
          <input type="checkbox" name="test" value="a" /> a
          <input type="checkbox" name="test" value="b" /> b
          <input type="checkbox" name="test" value="c" /> c
          <input type="checkbox" name="test" value="d" /> d
          <input type="checkbox" name="test" value="e" /> e
          <input type="checkbox" name="test" value="f" /> f
          <input type="checkbox" name="test" value="g" /> g 
          <br /> 
          <input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }"  />
          數(shù)字全選開關(guān)
          <input type="checkbox" name="num" value="1" /> 1
          <input type="checkbox" name="num" value="2" /> 2
          <input type="checkbox" name="num" value="3" /> 3 
          <br /><br />  <input type="button" value="選擇所有的字母" onclick="checkAll('test')" />
          <input type="button" value="清空選中的字母" onclick="clearAll('test')" /> 
          <br /><br /> 
          <input type="button" value="選擇所有的數(shù)字" onclick="checkAll('num')" />
          <input type="button" value="清空選中的數(shù)字" onclick="clearAll('num')" /> 


          <script type="text/javascript">
           // 說明:Javascript 控制 CheckBox 的全選與取消全選
           function checkAll(name) {    
            var el = document.getElementsByTagName('input');    
            var len = el.length;     for(var i=0; i<len; i++) {        
             if((el[i].type=="checkbox") && (el[i].name==name)) {            
              el[i].checked = true;        
             }    
            }
           }
           
           function clearAll(name) {    
            var el = document.getElementsByTagName('input');    
            var len = el.length;    
            for(var i=0; i<len; i++) {        
             if((el[i].type=="checkbox") && (el[i].name==name)) {            
              el[i].checked = false;        
             }    
            }
           }
          </script>

          posted on 2007-11-22 22:46 末日風情 閱讀(956) 評論(1)  編輯  收藏 所屬分類: javascript

          FeedBack:
          # re: Javascript 控制 CheckBox 的全選與取消全選
          2007-11-23 15:02 | CoderDream
          非常不錯,感謝分享!
          已收藏!  回復  更多評論
            
          <2007年11月>
          28293031123
          45678910
          11121314151617
          18192021222324
          2526272829301
          2345678

          常用鏈接

          留言簿(4)

          隨筆分類

          隨筆檔案

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

          主站蜘蛛池模板: 环江| 新野县| 琼海市| 博爱县| 噶尔县| 临漳县| 综艺| 桃园县| 桐梓县| 东兴市| 靖远县| 新泰市| 勃利县| 时尚| 临潭县| 浦县| 宁城县| 固始县| 阿拉善右旗| 墨江| 安陆市| 临沧市| 观塘区| 普兰店市| 云浮市| 文山县| 陆良县| 乌苏市| 邢台市| 长治市| 阳曲县| 时尚| 银川市| 加查县| 酒泉市| 从化市| 竹山县| 黑山县| 吉隆县| 肇源县| 邯郸县|