全选复选框JavaScript编写小结（附代码）

对于全选框的操作分为两种情况：

1.单击全选框，下面全部选中

2.单击下面的复选框，全部点击上，全选框被选中，否则全选框没有选中。

html样式

<tr>
     <td>爱&nbsp;&nbsp;好</td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="苹果" class="btn"/>苹果</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="fav" id="" value="香蕉" class="btn"/>香蕉</label>
     </td>
     <td>
      <label for=""><input type="checkbox" name="" id="checkAll" value="全选" class="btn"/>全选</label>
     </td>
    </tr>

js样式

var oChkAll = document.getElementById("checkAll");
    //全选
    oChkAll.onclick = function() {
     for(var i = 0; i < oFav.length; i++) {
      oFav[i].checked = this.checked;
     }
    }
    //复选框组
    for(var i = 0; i < oFav.length; i++) {
     oFav[i].onclick = function() {
      //如果全选
      if(isChkAll()) {
       oChkAll.checked = true;
      } else {
       oChkAll.checked = false;
      }
     }
    }
    //判断是否全选
    function isChkAll() {
     var all = oFav.length;
     var chk = 0;
     for(var i = 0; i < oFav.length; i++) {
      if(oFav[i].checked) {
       chk++;
      }
     }
     if(all == chk) {
      return true;
     } else {
      return false;
     }
    }

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!

# js复选框全选 # 复选框全选 # javaScript实现复选框全选反选事件详解 # JS实现复选框的全选和批量删除功能 # 基于JavaScript实现复选框的全选和取消全选 # js实现复选框的全选和取消全选效果 # js html css实现复选框全选与反选 # JS实现CheckBox复选框全选、不选或全不选功能 # JS实现CheckBox复选框全选全不选功能 # Js实现复选框的全选、全不选反选功能代码实例 # 全选 # 单击 # 复选框 # 两种 # 这篇文章 # 谢谢大家 # 判断是否 # 有疑问 # xhtml # brush # pre # class # lt # td # amp # tr # gt # html # color # style

返回目录在线咨询

上一篇：网站服务器架设指南：零门槛本地部署与AI个性化分析优化
下一篇：网站服务器测试全流程：性能评估、压力测试与安全检测核心方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

全选复选框JavaScript编写小结（附代码）

您的项目需求