js实现全选、反选

最新推荐文章于 2022-06-05 15:54:10 发布
最新推荐文章于 2022-06-05 15:54:10 发布
阅读量579 收藏 2
点赞数 1
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012637258/article/details/78687031
版权
<html> 
<body> 
<center> 
<input type="checkbox" id="selAll" οnclick="selectAll();" />全选 
<input type="checkbox" id="inverse" οnclick="inverse();" />反选 
<div id="allcheck"> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>足球<br> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>篮球<br> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跑步<br> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>登山<br> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>唱歌<br> 
<input type="checkbox" name="checkAll" id="checkAll" οnclick="setSelectAll();"/>跳舞<br> 
</div>
</center> 
<script language="javascript"> 


//选中全选按钮，下面的checkbox全部选中 
var selAll = document.getElementById("selAll"); 
function selectAll() 
{ 
  var obj = document.getElementsByName("checkAll"); 
  if(document.getElementById("selAll").checked == false) 
  { 
  for(var i=0; i<obj.length; i++) 
  { 
    obj[i].checked=false; 
  } 
  }else 
  { 
  for(var i=0; i<obj.length; i++) 
  {  
    obj[i].checked=true; 
  }
  } 
  
} 


//当选中所有的时候，全选按钮会勾上 
function setSelectAll() 
{ 
var obj=document.getElementsByName("checkAll"); 
var count = obj.length; 
var selectCount = 0; 


for(var i = 0; i < count; i++) 
{ 
if(obj[i].checked == true) 
{ 
selectCount++;
} 
} 
if(count == selectCount) 
{
document.all.selAll.checked = true; 
} 
else 
{ 
document.all.selAll.checked = false; 
} 
} 


//反选按钮 
function inverse() { 
var checkboxs=document.getElementsByName("checkAll"); 
for (var i=0;i<checkboxs.length;i++) { 
  var e=checkboxs[i]; 
  e.checked=!e.checked; 
  setSelectAll(); 
} 
} 


</script> 
</body> 
</html> 
安忘
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js全选和反选
noShutdown的博客
03-01 265
js代码 function testAllCheckbox() { //获得checkbox列表 var boxs = document.getElementsByName(&amp;amp;quot;check&amp;amp;quot;); //获得按钮的对象 var all = document.getElementById(&amp;amp;quot;...
js实现全选，不选，反选
HAI6545的博客
12-18 250
// 设置按钮标签 <button id="nth1">全选</button> <button id="nth2">不选</button> <button id="nth3">反选</button> //设置勾选框 <input type="checkbox"><input type="checkbox"><input type="checkbox"> <input type="ch
js实现全选和反选功能
10-25
js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能 js实现全选和反选功能
[学习笔记]JS全选反选
[ 风少爷]
04-16 213
function checkAll(){ var checkname=document.getElementsByName("neirongcheck"); var checkAlls=document.getElementById("checkall"); for(var i=0;i if(checkAlls.checked==true){ checkname[i].checked=t
js实现全选反选
Young_Fee的博客
01-12 935
效果： 注意是双击全选反选！ 代码： html lang="en"> head> meta charset="UTF-8"> title>Titletitle> head> body> div> input type="button" value="全选" ondblclick="CheckAll();"/> input type="
用js实现全选和反选
yangaoyuan1999的博客
10-30 574
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button class="Select">全选</button&...
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
JS实现全选反选全不选
06-18
JS实现全选反选全不选
AngularJS实现全选反选功能
10-23
AngularJS实现全选反选功能的知识点可以分为以下几个方面进行详细介绍： 1. AngularJS基本概念：AngularJS是一种流行的前端JavaScript框架，由Google维护和开发。它的主要目的是通过扩展HTML来简化Web应用的开发。...
JS实现全选、反选
12-28
JS JS实现全选反选 全选 反选
vue2.0在table中实现全选和反选的示例代码
08-28
在 `home.vue` 文件中，我们可以看到使用 JavaScript 实现全选和反选的逻辑，并使用 `v-on` 指令来绑定事件。 本示例代码展示了 Vue 2.0 中实现 Table 全选和反选的示例代码，并介绍了相关的知识点，包括使用 Vue ...
js实现全选反选不选功能代码详解
01-19
本文实例为大家分享了js实现全选反选不选功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <meta charset='utf-8' /> <body> <input type='checkbox' name='id' />...
js实现全选和反选
weixin_44590591的博客
07-13 194
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="checkbox" id="Selectall" />全选 <button id="Counter">反选&l...
JS实现全选和反选
kumayato的博客
05-11 305
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var btns = document.getElementById('top').children;
JS全选反选
热门推荐
Ghjkku的博客
06-05 13万+
JS全选反选JS全选反选
js 实现全选和反选效果
weixin_50636536的博客
01-07 275
<!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-Compatible" content="ie=edge"> <title>Do.
全选和反选
魂断楼兰的博客
11-29 302
全选和反选<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { w
js实现图片点击时放大，再点击恢复
u012637258的博客
10-13 3万+
var flag = true,//状态true为正常的状态,false为放大的状态            imgH,//图片的高度            imgW,//图片的宽度            img = document.getElementsByTagName('img')[0];//图片元素   img.onclick =  function(){  
vue3实现全选反选功能
最新发布
05-16
在 Vue 3 中实现全选反选功能，可以使用 `v-model` 指令绑定一个布尔值来实现全选和反选的状态切换。具体实现步骤如下： 1. 在 data 中定义一个数组 `items`，用来存储需要全选反选的选项列表。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } } } </script> ``` 2. 在模板中使用 `v-for` 循环渲染出所有选项，并使用 `v-model` 绑定每个选项的 `checked` 属性。 ```html <template> <div> <label> <input type="checkbox" v-model="allChecked" @change="selectAll"> 全选 </label> <div v-for="item in items" :key="item.id"> <label> <input type="checkbox" v-model="item.checked" @change="checkItem"> {{ item.name }} </label> </div> </div> </template> ``` 3. 实现全选和反选的方法。 ```javascript <script> export default { data() { return { items: [ { id: 1, name: '选项1', checked: false }, { id: 2, name: '选项2', checked: false }, { id: 3, name: '选项3', checked: false } ], allChecked: false // 全选状态，默认为未选中 } }, methods: { // 全选/取消全选 selectAll() { this.items.forEach(item => item.checked = this.allChecked) }, // 单个选项被选中/取消选中 checkItem() { this.allChecked = this.items.every(item => item.checked) } } } </script> ``` 在 `selectAll` 方法中，遍历 `items` 数组，将每个选项的 `checked` 属性设置为 `allChecked` 的值，这样就实现了全选和取消全选的功能。 在 `checkItem` 方法中，判断当前是否所有的选项都被选中，如果是，则将 `allChecked` 的值设置为 `true`，否则设置为 `false`，这样就实现了反选的功能。 这样，我们就完成了 Vue 3 中全选反选的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值