Javascript全选，反选，全不选

最新推荐文章于 2022-12-13 22:34:38 发布
最新推荐文章于 2022-12-13 22:34:38 发布
阅读量78 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/macleo/article/details/84119818
版权
[url]http://www.cnblogs.com/shige/archive/2009/02/10/1387020.html[/url]
Ext 4.0 API [url]http://docs.sencha.com/ext-js/4-0/#!/api[/url] 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">

function checkEvent(name,allCheckId)
{
  var allCk=document.getElementById(allCheckId);
  if(allCk.checked==true)
  checkAll(name);
  else
  checkAllNo(name);

}

//全选
function checkAll(name)
{
  var names=document.getElementsByName(name);
  var len=names.length;
  if(len>0)
  {
   var i=0;
   for(i=0;i<len;i++)
   names[i].checked=true;

  }
}

//全不选
function checkAllNo(name)
{
  var names=document.getElementsByName(name);
 var len=names.length;
 if(len>0)
  {
    var i=0;
    for(i=0;i<len;i++)
    names[i].checked=false;
  }
}

//反选
function reserveCheck(name)
{
  var names=document.getElementsByName(name);
 var len=names.length;
 if(len>0)
 {
 var i=0;
   for(i=0;i<len;i++)
   {
     if(names[i].checked)
     names[i].checked=false;
     else
     names[i].checked=true;

   }
 } 

}

</script>
</head>

<body>
<input type="checkbox" id="ckall" onclick="checkEvent('ck','ckall')" />全选
<input type="checkbox" id="ckReserve" onclick="reserveCheck('ck','ckReserve')" />反选
    <br />
<input type="checkbox" name="ck" value="1" />篮球
    <br />
<input type="checkbox" name="ck" value="2" />旅游
    <br />
<input type="checkbox" name="ck" value="3" />读书
 <br />
<input type="checkbox" name="ck" value="4" />美食
    <br />
<input type="checkbox" name="ck" value="5" />睡觉
</body>

</html>
东东车
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现全选，不选，反选
HAI6545的博客
12-18 248
// 设置按钮标签 <button id="nth1">全选</button> <button id="nth2">不选</button> <button id="nth3">反选</button> //设置勾选框 <input type="checkbox"><input type="checkbox"><input type="checkbox"> <input type="ch
JavaScript高手之路：全选、不选、反选效果
张翠山的博客
02-15 1264
前几个章节已经讲述了JavaScript对象定义的几种方式，并且用构造函数方式和字面来嗯方式来封装了一些数学相关的类和一些简单的特效，相信读者对JS面向对象编程有个大概轮廓了。 所以，接下来的几个章节，每个章节就是一个简单有趣的小案例，这样有利于我们对JS对象封装的学习兴趣。今天我们先来实现全选、不选、反选的效果，这个效果在网页中经常见到，比如网易邮箱。
JavaScript全选、全不选、反选
Huang_Qi_Yi的博客
05-07 232
预览： 1. 首先是html的布局。分别给人名前面加个input的勾选框，然后分别给全选、全不选和反选一个button按钮。 2. 接着就是js部分，首先我们先获取到input和button。 3. 选中第一个button，然后给个for循环，点击全选时全部选中。 这时checked结果为true。 4. 接着选中第二个button反选按钮，for循环，这时checked结果为 5. 最后就是反选，让checked结果相反取反 ...
JavaScript 实现全选、全不选和反选功能
梁辰兴的博客
12-13 3104
网页中使用到表单复选框时，如果有大量的数据需要选择，经常会用到全选或者反选功能，也可能会用到全不选功能，其实是全选的反选，下面使用原生的js来实现一下全选、全不选和反选功能。
使用JavaScript实现全选，全不选和反选
u_u2020的博客
05-09 2648
1使用JavaScript实现全选，全不选和反选 先写出它的布局，首先我们给他一个div来装所要写的内容，再在大的div里面放两个div和三个button按钮，button按钮就是用来放全选，全不选和反选的，第一个div是用来放标题的(选择爱好：)，而第二个div是用来放选择框和选项的，里面的选择框我们是用input标签来实...
原生JavaScript实现全选，全不选，反选
kiku
08-02 434
原生JavaScript实现全选，全不选，反选 一，HTML代码 <form> 请选择你爱好:<br> <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input type="checkbox" name="hobby" id"hobby2"> 登山 &lt...
jquery全选反选全不选案例
04-04
"jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
javaScript实现复选框全选反选事件详解
10-19
本文将详细介绍如何使用JavaScript实现复选框的全选和反选事件。复选框全选和反选是网页交互设计中常见的功能，常用于列表操作、表单提交等场景，允许用户一次性选择或取消选择多个选项。文中将通过实例代码展示如何...
jquery 实现全选，全不选，反选，获取选中的值
12-19
对于“全选”、“全不选”和“反选”功能，jQuery 提供了简洁的解决方案，同时也可以方便地获取选中的元素值。以下我们将详细探讨如何使用 jQuery 实现这些功能。 1. **全选**： 全选功能通常应用于具有多选选项的...
纯javascript实现全选全不选以及反选效果
xiaozhuangyumaotao的博客
05-27 466
纯javascript实现全选全不选效果如下： html代码： <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>单位存款</title> <linktype="text/css"rel="stylesheet"href="normalize.css"/> <linktype="text/css"rel="stylesheet"...
JS小实例笔记三——全选、反选、全不选
Thaley的博客
01-08 439
JS小实例——全选、反选、全不选笔记
javascript案例8——简易全选、全不选、反选
努力、拼搏、奋进
05-07 1126
一、案例描述 点击“全选”，复选框全部选中 点击“全不选”，复选框全部取消 点击“反选”，已选中的取消，未选中的选中。 二、案例效果演示 三、案例局部代码 html代码： <button onclick="chooseAll()">全选</button> <button onclick="notAll()">全不选</button> <button onclick="fanxuan()">反选</button> <br
【JS】全选全不选反选
xxxxxwxx的博客
08-23 471
点击全选和反选实现对应功能，在全选状态下取消选中其中一个，全选按钮取消选择状态，四个全选中时，全选按钮自动选择。
用js编写全选/全不选/反选
m0_53679993的博客
04-13 2213
运行出来的图片： 在html的代码如下： 在这里插入代码片 ```<form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="chec
JS实现全选、全不选、反选
csdnid_0001的博客
10-31 217
JS实现全选、全不选、反选、CheckBox复选框、按钮
js实现全选、反选、全不选
lcjjy666的博客
11-24 211
<html> <head> <title>全选 反选 全不选</title> <script type="text/javascript"> function changeFav(oper){ var favs=document.getElementsByName("fav"); if(oper=="all"){ //全选 for(var
用js实现复选框的反选和全选和全不选
feilong_12的专栏
02-28 726
function quanxuan(){ for(i=1;i document.getElementById("check"+i).checked=true; } } function quanbuxuan(){ for(i=1;i document.getElementById("check"+i).checked=false; } } function fanxuan(){
jquery全选反选不选
最新发布
12-20
以下是基于jQuery实现全选、反选和不选的代码示例： 1. 全选： ```javascript $("#selectAll").click(function(){ $("#checkBoxList :checkbox").prop("checked", true); }); ``` 2. 反选： ```javascript $("#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值