切换选中

比眉伴天荒 2022-09-10 04:20 159阅读 0赞

需求： 切换选中

1.1 点击全选按钮 将每一个复选框的状态都变成选中

1.2 点击不选按钮 将每一个复选框的状态都变成不选中

1.3 点击反选按钮 将选中的复选框变成不选中 将不选中的变成选中

代码实现：

// 1、获取元素

var btns = document.getElementsByTagName('button');

var inps = document.getElementsByTagName('input');

console.log(btns, inps);

// 2、点击事件 点击全选按钮

btns\[0\].onclick = function () \{  
            // 3、每一个复选框

for (var i = 0; i < inps.length; i++) \{  
                console.log(inps\[i\]);

// 4、复选框的状态都变成选中

inps\[i\].checked = true;

\}

\}

// 2、点击事件 点击反选按钮

btns\[1\].onclick = function () \{  
            // 3、每一个复选框

for (var i = 0; i < inps.length; i++) \{  
                // 判断 如果是选中 就变为不选中 如果是不选中 就变为选中

//    if(inps\[i\].checked == true)\{  
                //        inps\[i\].checked = false;

//    \}else\{  
                //        inps\[i\].checked = true;

//    \}

inps\[i\].checked = !inps\[i\].checked;

\}

\}

// 2、点击事件 点击不选按钮

btns\[2\].onclick = function () \{  
            // 3、每一个复选框

for (var i = 0; i < inps.length; i++) \{  
                // 4、复选框的状态都变成不选中

inps\[i\].checked = false;

\}

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 jq 实现切换菜单选中状态

点击导航菜单，切换选中状态效果： ![1149706-20190922212835682-1951559906.png][] ![1149706-20190922212

落日映苍穹つ/ 2023年08月17日 16:01/ 0 赞/ 121 阅读

相关 android选项卡切换，选中换图片，换背景,类似微信,qq的切换

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

小鱼儿/ 2022年12月30日 04:59/ 0 赞/ 111 阅读

相关 vue 文件中使用onmouser 和onmouserout 切换图片选中/未选中状态

<div><img ref="img02" :src="showIMg02 ? imgUrl02 : imgUrl02ed" title="2D" @mouseover="$r

水深无声/ 2022年12月24日 03:59/ 0 赞/ 100 阅读

相关 uni-app实现组件菜单左右滑动并点击切换（选中居中显示）

先看下效果 ![20210526110257979.png][] ![20210526110257981.png][] 效果一：可直接使用 scroll-into-vi

r囧r小猫/ 2022年10月16日 00:57/ 0 赞/ 52 阅读

相关 Extjs--checkbox，选中与不选中

if(!this.status){ Ext.getCmp("southPanelCheckbox").setValue(true); v

野性酷女/ 2022年09月22日 15:47/ 0 赞/ 256 阅读

相关切换选中

需求：切换选中 1.1 点击全选按钮将每一个复选框的状态都变成选中 1.2 点击不选按钮将每一个复选框的状态都变成不选中

比眉伴天荒/ 2022年09月10日 04:20/ 0 赞/ 160 阅读

相关 js切换选择项默认选中10

//------------------切换选择项--------------------- /\ var lab

深藏阁楼爱情的钟/ 2022年06月02日 06:12/ 0 赞/ 215 阅读

相关 vue+element-Table切换页码时被选中状态不变

需求分析在做项目的时候遇到了一个这样需求，用户在选择没有结单的Table的时候，可以选择多个没有支付的订单进行加入一个统一结账的“购物车”中，那么可以选择任意页的，这个

梦里梦外;/ 2022年01月31日 04:47/ 0 赞/ 352 阅读

相关 Ui选中

var flag = "$\{flag\}"; if(flag!="null")\{ $(".artical\_wr

深藏阁楼爱情的钟/ 2022年01月27日 16:45/ 0 赞/ 246 阅读

相关导航栏标签下划线的切换，默认选中第一个，点击的时候切换。

使导航栏中第一个标签默认有下划线，当鼠标划过别的导航的时候，下划线会换到别的导航下，当鼠标点击后，只有点击的那个标签有下划线，直到点击下一次的时候，下划线换到下一个被点击

亦凉/ 2021年11月09日 08:54/ 2 赞/ 594 阅读