欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)checkbox全選、不選與反選的方法

 更新時(shí)間：2015年02月09日 09:07:21   作者：peerless  
這篇文章主要介紹了js實(shí)現(xiàn)checkbox全選、不選與反選的方法,以實(shí)例形式詳細(xì)分析了實(shí)現(xiàn)的思路及對(duì)應(yīng)的html與js代碼的實(shí)現(xiàn)過程,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)checkbox全選、不選與反選的方法。分享給大家供大家參考。具體分析如下：

一、思路：

1. 獲取元素

2. 給全選 不選 反選添加點(diǎn)擊事件

3. 用for循環(huán)checkbox

4. 把checkbox的checked設(shè)置為true即實(shí)現(xiàn)全選

5. 把checkbox的checked設(shè)置為false即實(shí)現(xiàn)不選

6. 通過if判斷，如果checked為true選中狀態(tài)的，就把checked設(shè)為false不選狀態(tài)，如果checked為false不選狀態(tài)的，就把checked設(shè)為true選中狀態(tài)。

二、html代碼：

<input type="button" value="全選" id="sele"/>
<input type="button" value="不選" id="setinterval"/>
<input type="button" value="反選" id="clear"/>
<div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

三、js代碼：

<script>
window.onload=function(){

  var sele=document.getElementById('sele');//獲取全選
  var unsele=document.getElementById('setinterval');//獲取不選
  var clear=document.getElementById('clear');//獲取反選
  var checkbox=document.getElementById('checkboxs');//獲取div
  var checked=checkbox.getElementsByTagName('input');//獲取div下的input
//全選
   sele.onclick=function(){
    for(i=0;i<checked.length;i++){
    checked[i].checked=true
          }
     }

//不選
    unsele.onclick=function(){
      for(i=0;i<checked.length;i++){
       checked[i].checked=false
          }
      }
//反選
    clear.onclick=function(){
       for(i=0;i<checked.length;i++){
        if(checked[i].checked==true){
        checked[i].checked=false
         } 
   else{
     checked[i].checked=true
       }
       }
      }
}
</script>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論