js+jq实现全选和反全选联动，超详细

已于 2022-11-02 17:49:25 修改
阅读量288 收藏
点赞数
文章标签： js checkbox java javascript jquery
于 2020-10-23 12:01:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xukaiqiang123/article/details/109239795
版权

jq的js文件需要自行官网下载或在联网情况下采用第三方jq库
废话不多说直接上代码，注释超详细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
<table border="1">
    <tr>
        <td><input type="checkbox" id="checkAll" onclick="select()"/> </td>
        <td>姓名</td>
        <td>爱好</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"/></td>
        <td>哈尼克孜</td>
        <td>跳舞</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"/></td>
        <td>古力娜扎</td>
        <td>恋爱</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"/></td>
        <td>迪丽热巴</td>
        <td>跳舞</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"/></td>
        <td>张天爱</td>
        <td>蹦迪</td>
    </tr>
</table>
<script type="text/javascript">
//页面加载完直接调用
    $(function () {
    //点击全选按钮将复选框全部选中或全部不选中
        $("#checkAll").click(function () {
            if ($("#checkAll").prop("checked") == true) {
                $(".check").prop("checked", true);
            } else {
                $(".check").prop("checked", false);
            }
        })
        //获取所有复选框对象
        var check = $(".check");
        //点击某一个复选框时都会调用
        $(".check").click(function () {
        	//判断是否全部都选中的计数器
            var count = 0;
            //遍历判断
            for (var i in check) {
                var checkElement = check[i];
                //有选中的计数器加一
                if (checkElement["checked"] == true){
                    count++;
                }
                //计数器等于复选框的和则将全选按钮设置为选中，否则设置为不选中
                if (count == check.length) {
                    $("#checkAll").prop("checked", true)
                }else {
                    $("#checkAll").prop("checked", false)
                }
            }
        })
    })
</script>
</body>
</html>

收藏加关注，再来不迷路！！！

无形风
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS+JSP checkBox 全选具体实现
12-03
代码如下: [removed] function func(){ var options=document.getElementsByName(“chkBox”); for (var i=0;i[i].checked=true; type=checkbox name=chkBox value=1> <input type=checkbox name=chkBox value=1&...
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
js操作级联选择多选框
z130532的博客
01-05 991
级联选择多选框很有用,为拉用户的更好体验,可以table全选, [code="java"] function A(){ var allcheckboxs = document.getElementsByName("checkbox"); var array = new Array(); var isSelect = false; ...
JQ中多级联动下拉选择框
豆豆熊博客
11-14 3526
html代码不多说,贴图出来! 效果如下: 下拉效果如下: 重点来了,js代码是重重之重: $(function () { $(&quot;.formOption&quot;).click(function () { //点击外层,下拉出现 $(this).siblings('.formList').show(); }) $(&quot;.form...
使用 JQuery 实现级联选择框
MonsterAji的博客
04-10 781
一、运行截图 二、使用步骤 1. 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
jQuery输入框三级联动菜单选择
ICode联盟
10-26 507
jQuery输入框三级联动菜单选择效果，点击input输入框分类菜单选择器，点击弹出下拉菜单，三级联动选择器，适用于多分类菜单选择代码。
JQuery/JS实现的三级联动选择
峰行天下
08-27 1644
        前段时间做一个内部项目，要用到三级联动选择（就是三个select组件，他们之间相互影响）通过网上search和study，终于成功解决。要实现三级联动大致有2种实现方式：       第一种：使用Ajax，这是最简单的一种。三个select（id分别为select1，select2，select3），               首先发送ajax请求加载select1的options，               当select1选择后再发送一个ajax请求得到对应的select2的opti
JS实现checkbox的全选和反选
07-22
资源名称：JS实现checkbox的全选和反选资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
最新发布
08-01
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
js 复选框联动，一个控制多个
体验新模板
01-07 638
js 复选框联动，一个控制多个 <div id="hxqy_div" style="background-color:#0066cc;z-index:1000;position: absolute;height: 500px; width: 520px;top:20%;left:50%;margin:1px;border:1px solid rgb(50, 36, 247);"> <div class="drag_hxqy" style="position: absolut
js多级联动多选checkbox插件
08-10
js多级联动多选checkbox插件
JS全选反选父项子项联动多选框
04-08
父项选中时，子项随父项选中；父项不选，子项未选； 子项全选中时，父项也选中，子项有一项，不选时，父项即不选中。最好的全选js，自己用的，原创！
jquery实现 级联选择器
weixin_42698255的博客
04-10 4482
看到UI在做设计图 有级联选择器 就先写写 （项目还在用jquery~~~~~~） 先上效果图 css .box{ position: relative; width: 800px; height: 800px; background: #2A363E; } .input{ font-size: 20px; ...
级联选项
weixin_38722500的博客
07-27 251
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { padding: 0
jquery实现select三级联动（简单易懂）
热门推荐
yanchenxi313761的博客
03-28 3万+
       尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见        该例子实现的是省市县三级联动。        实现原理：    省、市、县，每个下拉框数据都由一个数组组成；光累文字肯定是不行的，直接上代码了。        先确定HTML部分：&lt;select name="" id="selProvince"&gt; &lt;option valu...
jquery实现复选框联动
daxiang的专栏
04-27 9260
input1 input2 input3 input4 $('input[type="checkbox"]').click(function(){ // 获取当前复选框在所有复选框中索引 var index = $('input[type="checkbox"]').index(this); var arrStage = ['input4','input3','inp
原生js的联动全选
dianjiao8565的博客
02-18 123
开发应用中有很多工具可以使用，下面介绍一个原生js写的联动全选思路！！！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
js 实现全选、全不选、反选功能
wolinxuebin的专栏
05-30 1万+
不多说，直接上代码，复制直接可以使用 无标题文档 function selectAllNullorReserve(obj,type){ if(obj!=null&&obj!=""){ if(document.getElementsByName(obj)!=undefined&&document.getElementsByName(obj).length>0){ //getE
乘法表.php
Vivian_shuang的博客
08-15 467
html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> me
react 全选_使用React的Hooks+ts实现全选和全不选？
05-31
可以通过使用React的Hooks和TypeScript来实现全选和全不选功能。下面是一个简单的例子： ```tsx import React, { useState } from "react"; interface Item { id: number; name: string; selected: boolean; } interface Props { items: Item[]; } const SelectAll: React.FC<Props> = ({ items }) => { const [selectAll, setSelectAll] = useState(false); const handleSelectAll = () => { const updatedItems = items.map((item) => ({ ...item, selected: !selectAll })); setSelectAll(!selectAll); // 更新items }; const handleSelectItem = (id: number) => { const updatedItems = items.map((item) => item.id === id ? { ...item, selected: !item.selected } : item ); const allSelected = updatedItems.every((item) => item.selected); setSelectAll(allSelected); // 更新items }; return ( <div> <input type="checkbox" checked={selectAll} onChange={handleSelectAll} /> 全选 {items.map((item) => ( <div key={item.id}> <input type="checkbox" checked={item.selected} onChange={() => handleSelectItem(item.id)} /> {item.name} </div> ))} </div> ); }; export default SelectAll; ``` 在这个例子中，`SelectAll`组件接收一个`items`数组作为props，该数组包含`id`、`name`和`selected`属性。`selectAll`状态用于表示是否全选，初始值为`false`。`handleSelectAll`函数用于处理全选/全不选事件，它会将`items`数组中所有元素的`selected`属性设置为`!selectAll`，并更新`selectAll`状态。`handleSelectItem`函数用于处理单个item的选择事件，它会将选中的item的`selected`属性取反，并检查是否所有的item都被选中，如果是，将`selectAll`状态设置为`true`。最后，`SelectAll`组件渲染一个全选的`checkbox`和一个包含所有`item`的列表，每个`item`都有一个选择`checkbox`，当选中一个`checkbox`时，将触发`handleSelectItem`函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值