js html复选框的全选和非全选

最新推荐文章于 2024-04-07 12:59:07 发布
最新推荐文章于 2024-04-07 12:59:07 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： html class input function xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/fugyuan000887/article/details/6205106
本文介绍了一种使用JavaScript实现复选框全选功能的方法。通过编写特定的JS函数，可以实现在点击全选复选框时，页面上所有相关联的子复选框都会被同时选中或取消选中。此外，当子复选框的状态发生变化时，全选复选框的状态也会相应更新。

JS代码：

//设置复选框的全选的单击事件
function selectChk(ParentChkID, ChildChkName) {
//全选和取消全选操作
    $("#" + ParentChkID + "").click(function() {
        if ($(this).attr("checked") == true) { // 全选
            $("input[name='" + ChildChkName + "']").each(function() {
                $(this).attr("checked", true);
            });
        } else { // 取消全选
            $("input[name='" + ChildChkName + "']").each(function() {
                $(this).attr("checked", false);
            });
        }
    });
    //子复选框影响 全选复选框的操作
    $("input[name='" + ChildChkName + "']").each(function() {
        $(this).click(function() {
            //取消全选选择框的选择
            if ($(this).attr("checked") == false) {
                $("#" + ParentChkID + "").attr("checked", false);
            }
            //选择全选选择框
            var flag = 1;
            $("input[name='" + ChildChkName + "']").each(function() {
                if ($(this).attr("checked") == false) {
                    flag = 0;
                }
            });
            if (flag == 1) {
                $("#" + ParentChkID + "").attr("checked", true);
            }
        });
    });
}

 

 

html文件代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>复选框全选和非全选</title>
</head>
<body>
        <table>
            <tr class="list-title">
                <td style="width: 55px;">
                    <input id="bBrowseAll" type="checkbox" class="chkbPur" name="bBrowseAll" />可见
                </td>
            </tr>
           
            <tr class="content">
             
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1001" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1002" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1003" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1004" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1005" />
                </td>
            </tr>
           
            <tr class="content">
            
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1006" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1007" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1008" />
                </td>
            </tr>
           
            <tr class="content">
             
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1009" />
                </td>
            </tr>
           
            <tr class="content">
              
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1010" />
                </td>
            </tr>
           
            <tr class="content">
               
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1011" />
                </td>
            </tr>
           
            <tr class="content">
                <td>
             
                <td class="bPurview">
                     <input id="Checkbox13" type="checkbox" class="chkbPur" name="bBrowse" value="1012" />
                </td>
            </tr>
           
        </table>
   
     <script type="text/javascript" language="javascript">
   
             //初始化页面按钮、复选框的单击操作
            
    selectChk("bBrowseAll", "bBrowse");
    isSelectChk("bBrowseAll", "bBrowse");

    </script>
</body>
</html>

 

 

休闲中
关注
1.html前端多选框的全选与全不选
duhasohfsig的博客
12-21 1161
function checkBox(){ var checkAll= document.getElementById(‘checkAll’); //获取checkAll var checkbox = document.getElementsByName(“ids”); //获取所有checkbox //如果checkAll是选中状态，遍历所有checkbox，checkbox的选中状态 if(checkAll.checked){ $(checkbox).each(function(){ ...
（html/js）多选复选框自动全选/反选实例
Xi's LiuY
11-29 983
测试结果： 点击全选时，选中所有选项： html部分代码： 全选/复选框 全选 篮球 足球 排球 js部分代码： /** * Created by LY on 2016/11/28. */ window.onload= function() { var all = document.getElem
HTML多选框，全选，多选
热门推荐
anzhen9的博客
08-17 1万+
项目中用到的，结合网上看的一些例子，整了一个，多选全选的玩意儿，如有雷同纯属巧合（手动滑稽） 没有做反选操作相关的功能 用jquery整的 然后对应的全选checkbox 再然后就是那一堆的多选checkbox了 来个效果的。。。。
html复选框的全选和全不选
qq_38409944的博客
05-17 1万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script&amp;gt; function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElement
html全选框选完自动全选,多选框：全选+选中值.html
weixin_39644325的博客
05-31 293
梨子李子栗子荔枝全选var checkAll = document.getElementById('checkall');var inputs = document.getElementById('content').getElementsByTagName('input');console.log(inputs.length)checkAll.onclick = function() {for(...
html实现选择框的全选与反选
fzxyxf1314的博客
10-20 1625
html中的全选和反选功能的实现
html多选下拉框 ，CheckBox的Select组件 可多选的下拉框
04-09
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
html 怎么整体全选功能,html复选框全选按钮
weixin_32924159的博客
05-31 4544
如何用html做复选框全选中和全不选中html中实现单击单击一个按钮实现全部选中,在点击一 function selectAllDels() { var allCheckBoxs = document.getElementsByName("preDelCheck"); var desc = document.getElementById("allChecked"); var selectOrUns...
HTML 表单中， 复选框全选和反选
hwj1107的专栏
12-08 2407
在做批量删除的时候用到的是 复选框的 全选和反全选：前端html 页面： 全选 删除 删除 删除Javacript:   function selectChange(){       var chkSelectAll = document.getElementById("chkSelectAll");    var checked = chkSele
HTML中的select下拉框内容显示不全的解决办法
jrrfgj的博客
02-19 1572
HTML中的select下拉框内容显示不全的解决办法
HTML复选框实现 全选 反选 全不选的 简单小实例
qq_39209045的博客
03-22 848
<html> <head> <title>HTML</title> <style type="text/css"> </style> </head> <body> <input type="checkbox" id="boxid" onclick="se...
【基于HTML5的网页设计及应用】——全选和取消全选
最新发布
shsjssnn的博客
04-07 1012
【基于HTML5的网页设计及应用】——全选和取消全选
HTML、CSS、Jquery综合练习之全选、全不选与反选
weixin_61399134的博客
05-17 867
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
HTML+CSS+JavaScript：全选与反选案例
lbcbjtlhmjq的博客
08-03 794
1、单击全选按钮，下面三个复选框自动选中，再次单击全选按钮，下面三个复选框自动取消选中2、当下面三个复选框全都选中时，全选按钮自动选中，下面三个复选框至少有一个未选中，全选按钮自动取消选中。
水晶图片案例
weixin_33695450的博客
05-14 461
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
HTML多选框滚动条,el-select 下拉框多选实现全选的实现
weixin_42311979的博客
06-03 1865
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些方法一：下拉项增加一个【全选】，然后应该有以下几种情况：下拉选项全都勾选时，【全选】自动勾选；下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；下拉选项全都未勾选时，点击【全选】后，所有下拉选项不勾选；下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不...
html的checkbox标签全选与取消全选
weixin_42670523的博客
07-23 7609
1.html代码：     &lt;body&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;&lt;input type="checkbox" onclick="swapCheck()" /&gt;&lt;/th&gt; &lt;th&gt;衣服&l
【JS】复选框的全选和取消全选
zuncle的博客
02-09 9615
测试代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> li{list-style: none;} </style> </head> <body> <div class="first"> <ul c
JavaScript实现复选框全选与子框联动功能
### JS实现复选框全选全不选功能 全选和全不选的功能是指在用户界面上，提供一个“全选”复选框，当点击这个复选框时，页面上所有的复选框会被同时选中或取消选中。这一功能在处理大量复选框时非常有用，能够提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值