DOM操作checkbox（全选/反选/全不选）

最新推荐文章于 2021-08-07 15:57:57 发布
置顶 最新推荐文章于 2021-08-07 15:57:57 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxuestarrysky/article/details/9218515
版权
该博客介绍了如何使用DOM操作实现HTML页面中checkbox的全选、全不选和反选功能。通过JavaScript代码，分别展示了点击按钮时，对多个checkbox进行全选、全不选和反选状态切换的方法。示例代码详细解释了不同方法的实现原理，并提供了实际的HTML页面结构。
摘要由CSDN通过智能技术生成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>check.html</title>
 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
 
  <body>
   您的爱好很广泛!!!
    <br>
  <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选
  <br>
        <input type="checkbox" name="items" value="保龄球" />保龄球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox&#

最低0.47元/天 解锁文章
huangxuestarrysky
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScripts/jQuery--爱好选择器
qq_45679015的博客
08-27 877
<form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox" /> 全选/全不选 <br /> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="c.
jquery一键控制checkbox全选、反选或全不选
11-27
4. **一键控制全选/反选/全不选**： `$('#orChecked').change(function() { ... })`：这个事件处理器处理了全选、反选和全不选三种情况。首先，它检查`#orChecked`是否被选中，然后根据当前复选框的状态和选中情况...
dom--checkbox的用法
BarryLee的博客
07-10 769
checkbox--也就是复选框，用过邮箱的应该都知道的，点击全选复选框，下面的复选框就全选了，再点的时候又都全取消了，选中一部分，点击删除将删除所选中的邮件。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;checkbox.html&lt;/ti..
Dom复选框操作
邢_heng
05-29 386
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;
javascript用DOM实现 复选框的全选、反选、全不选
永不停歇
03-04 2351
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档 function qx(){  for(var i=0;i     var ck=document.getElementsByName("ck");   ck[i].checked=tr
DOM操作复选框
weixin_34308389的博客
11-09 165
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后， 足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。 下面我们来实现这个效果。 源代码: [jav...
Jquery 1.42 checkbox 全选和反选代码
10-29
在这个例子中，我们有一个`<label>`标签用于触发全选/反选操作，以及一个`<table>`包含多个`<tr>`行，每行有一个`<input type="checkbox" class="chk" />`用于用户选择。 总结一下，这个例子展示了如何使用jQuery ...
javascript 全选/反选,取消选择效果
10-29
全选功能是选中所有复选框（checkbox），反选则是取消所有已选中的复选框，而取消选择通常是指取消选中最后一个作为“全选/反选”控制的复选框。 在 HTML 结构中，我们可以创建一个表格（table）来展示数据，每个行...
Js/Jquery 实现checkbox全选，反选，全不选
03-31
在提供的文件“js实现checkbox全选，反选，全不选.htm”中，应当包含了上述功能的具体实现。通过查看源码，我们可以了解到实际的HTML结构以及jQuery脚本是如何与之配合的。这个文件可以作为一个示例，帮助我们更好地...
DOM选中和取消所有的checkbox
HuashirenYty的博客
10-24 293
checkAllBoxes.html <!DOCTYPE html> <html> <head> <title>选中所有checkbox</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta ...
Javascript操作BOM和DOM详解（3）实例：js操作checkbox、select、table
葡萄藤的博客
12-28 589
一、JS操作DOM之checkbox 1.图示 2.html代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&
JavaScript实现复选框的全选功能
weixin_33885676的博客
09-30 139
发现一个比较简单的实现复选框的全选功能，实现代码如下： function selectall(obj, items) { var state = obj.checked; if(items.length) { for(var i=0; i<items.length; i++) { ...
javascript实现复选框的全选全不选
weixin_30677617的博客
06-09 104
通过复选框的id获取到复选框 元素 对复选框绑定点击事件 每个checkbox都设置相同的name checkOne 通过得到的元素获取checkbox的状态 当点击全选全不选checkbox时，检查全选全不选的box状态，如果为true 就将所有其他box状态都设置为true 如果全选全不选的状态为false，相应的就将其他所有的box状态checked设置为false <...
复选框全选
zdk81053的博客
05-18 146
function selectAllCheckbox() { if(null == document.forms[0].m_selectedRow){ document.forms[0].selectAll.checked = false; } else { var index = document.forms[0].m_selectedRow.length; i...
JS-DOM编程-05-复选框的全选与取消全选
TSCCG的博客
08-07 1185
JS-DOM编程-05-复选框的全选与取消全选 1.当点击全选框时，选中所有复选框 复选框对象的checked属性代表复选框是否被选中： 如果值为true，则表示复选框被选中 如果值为false，则表示复选框未被选中 我们可以利用checked属性来实现功能。 在全选框中设置一个click事件，当点击全选框时，遍历所有复选框对象， 将全选框的checked属性值赋给所有复选框的checked属性。 <!DOCTYPE html> <html lang="en"> <head
复选框的实现Dom对象
qq_40281230的博客
03-09 202
实现其功能的代码如下表示：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt;   window.onload = function(){ selAll = document.getElemen
用JavaScript（js）实现复选框效果（全选、全不选、反选）！
我只是个很菜的前端
07-21 2420
复选框 js 全选、反选、全不选
练习：JavaScript实现复选框全选，全不选，反选
海边拾贝seebit
07-30 402
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;meta http-equiv="content-Type" content="text/html; charset=utf-8&q
dom中实现全选复选框的实例。
weixin_30955617的博客
10-19 209
PS：这个题考试时没有做出来，摘录下来好好作为实例。 <script type="text/javascript"> //2、实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选 //全选/全不选 /* 1、找到全选框 ...
HTML实现全选、反选功能的复选框与按钮交互
全选按钮允许用户一次性选择所有复选框，而反选功能则用于取消所有已选中的复选框。以下是如何使用JavaScript来实现这种功能的详细解释： 首先，HTML部分创建了一个表格，其中包含一个全选复选框（`<input type="...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值