html dom反选,Dom操作--全选反选

最新推荐文章于 2024-01-09 18:29:04 发布
最新推荐文章于 2024-01-09 18:29:04 发布
阅读量467 收藏 1
点赞数
文章标签： html dom反选

我们经常会在网站上遇到一些多选的情况，下面我就来说说使用Dom写全选反选的思路。

全选思路：

首先，我们来分析一下知道，当我们点击"全选"复选框的时候，所有的复选框应该都被选中，那我们就可以给"全选"复选框注册一个事件，就是如果全选按钮被选中的话，那么其他所有复选框都被选中；然后就是其他复选框部分选中或全不选中，那么"全选"复选框不选中。

反选思路：

我们知道，当我们点击反选按钮，那么就把除"全选"之外的所有复选框的选中状态取反(之前选中的为不选中，之前不选中的为选中)，在根据这些复选框的选中状态来判断"全选"是否选中。

function f1(){

var gender=document.getElementsByName("sex");

for(var i=;i

if(gender[i].checked){

alert(gender[i].value);

break;

}

}

}

function checkAll(){

var checkAll=document.getElementById("checkAll");

var checkboxs=document.getElementsByTagName("input");

for(var i=;i

if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

checkboxs[i].checked=checkAll.checked;

}

}

}

window.οnlοad=function(){

var checkboxs=document.getElementsByTagName("input");

for(var i=;i

if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

//给子checkbox动态注册事件

checkboxs[i].οnclick=function(){

//定义一个变量记录"全选"checkbox的选中状态，默认为选中

var isCheckAll=true;

for(var j=;j

//过滤出不是checkbox和全选的控件

if(checkboxs[j].type=="checkbox"&&checkboxs[j].id!="checkAll"){

//判断子checkbox控件是否选中

if(!checkboxs[j].checked){

//只要有一个checkbox控件没有选中，那么全选checkbox就不选中

isCheckAll=false;

}

}

}

document.getElementById("checkAll").checked=isCheckAll;

}

}

}

}

function reCheck(){

var checkboxs=document.getElementsByTagName("input");

for(var i=;i

if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

checkboxs[i].checked=!checkboxs[i].checked;

}

}

var isCheckAll=true;

for(var i=;i

if(checkboxs[i].type=="checkbox"&&checkboxs[i].id!="checkAll"){

if(!checkboxs[i].checked){

isCheckAll=false;

}

}

}

document.getElementById("checkAll").checked=isCheckAll;

}

男

女

全选

吃饭

睡觉

打豆豆

jQuery全选反选实例

1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

jquery、js操作checkbox全选反选

全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

DOM操作复选框

DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后,足球.篮球.游泳和唱歌均被选取.取消"全选/全不选"复选框之后,被选中的所有都变成未选中 ...

jquery、js全选反选checkbox

操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

JavaScript 实现全选 / 反选功能

JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面

jQuery全选反选插件

(function($){ $.fn.check = function(options){ var options = $.extend({ element : "input[name='n ...

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码

& ...

JQuery 全选 反选 获取Table 中指定td的元素值

//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('

& ...

随机推荐

php入门一ubuntu16.04中php环境配置及一个网页

1.PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. 2.PHP 文件可包含文本.HTML.JavaScr ...

我整理的PHP 7.0主要新特性

原文:http://php.net/manual/en/migration70.new-features.php 1.标量参数类型声明 现在支持字符串(string).整型(int).浮点数(floa ...

Go字典

字典(map)是Go语言内置的数据结构,一组键值对的无序集合. 看代码: package main import "fmt" func main() { //使用make申请一个m ...

Nuc900 bsp turbowriter使用注意点

Nuc900 bsp turbowriter使用注意点 一. Nor flash 用turbo 烧写kernel和文件系统时的注意点: 1. kernel的image No要大于rootfs 2.烧写 ...

为什么VUE注册组件命名时不能用大写的？

这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

TinyMind 多标签图像分类竞赛 之路

竞赛传送门:https://www.tinymind.cn/competitions/42 我们就是傻狗天仙配啦~ 决赛排行榜: 这次比赛感谢第一名的 baseline:https://blog.cs ...

ASP.NET Core分布式项目实战-目录

前言 今年是2018年,发现已经有4年没有写博客了,在这4年的时光里,接触了很多的.NET技术,自己的技术也得到很大的进步.在这段时光里面很感谢张队长以及其他开发者一直对.NET Core开源社区做出 ...

(转载)mysql：设置mysql的远程访问

1.登陆Mysqlmysql -u root -p2.允许任何IP访问,其中密码为admingrant all privileges on *.* to root@"%" iden ...

juquery去除字符串前后的空格

1.  去掉字符串前后所有空格: 代码如下: function Trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); }

常用的快速Web原型图设计工具

做产品原型是非常重要的一个环节,做产品原型就会用使用各式各样的工具.在PM朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下. 主要有 ...

hyaliney
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery、js操作checkbox全选反选
10-26
以上就是使用 jQuery 和 JavaScript 操作 checkbox 全选和反选的基本方法。在实际应用中，你可以根据需要调整这些函数，例如添加事件监听器，使得全选/反选按钮可以触发这些功能。在网页开发中，这样的功能能够显著...
Javascript实现全选反选
08-11
在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...
HTML、CSS、Jquery综合练习之全选、全不选与反选
weixin_61399134的博客
05-17 645
点击图中的全选框，没有选项被选中时，将选中所有选项；有选项被选中时，将取消所有选中选项；点击图中的反选框，会反选未选中的选项。反选：点击反选按钮，下⽅选中的复选框设置为未选状态，下⽅未选中的复选框设置为选中状 态。CSS在代码第一部分；HTML在代码第二部分；使用jQuery实现JS效果，在代码第三部分。全不选：取消选中⾯⽅的复选框，下⾯所有的复选框设置为未选状态。全选：选中上⾯的复选框，下⾯所有复选框设置为选中状态。
HTML_jQuery中关于this的理解(复选框的全选,全不选,反选)
nrsc
08-20 1337
yoyo $(function(){ $("#selectAll").click( //全选~~~全不选 function(){ //this永远代表的是dom(js)对象 //alert(this.checked); //这里之所以可以直接.checked是因为这里的this拿到的是
html的全选反选
最新发布
2301_80177550的博客
01-09 836
html实现选择框的全选和反选。
HTML DOM实现全选，全不选，反选功能
weixin_55650421的博客
06-04 2753
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table { width: 80%; border: 1px solid #69c; border-collapse: collapse; margin: 10px auto; }.
DOM全选、全不选、反选的操作
*~~~~~向日葵、的眼里只有【太阳】
02-23 1410
DOM全选、全不选、反选的操作 今天学习了 DOM相关的知识，完成了它实现全选、全不选以及反选和提交的操作。 但是只能在发firefox中才能显示正常的效果，在IE或其他浏览器不可以。 这个问题还需要怎样去解决呢？ 请教高手！         效果：              用了onclick触发事件来写的。 源码：       MyHtml.html
JS简单表格列表全选反选代码.zip
07-05
总的来说，"JS简单表格列表全选反选代码"是JavaScript基础应用的一个实例，涉及到事件处理、DOM操作、遍历和逻辑判断等多个核心概念，对于初学者和有一定经验的开发者来说，都是一个很好的学习和参考素材。
jQuery图片列表全选反选代码
06-24
总结起来，"jQuery图片列表全选反选代码"是一个涉及到前端交互设计、DOM操作、事件处理、数据同步以及用户体验优化等多个方面的项目。通过合理运用jQuery的API，可以高效地实现这一功能，为用户提供便捷的图片管理...
Jquery 1.42 checkbox 全选和反选代码
10-29
在网页交互设计中，全选和反选功能是常见的用户操作需求，特别是在处理多选列表时。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务。在这个例子中，我们将详细解析如何使用jQuery...
html JavaScript js复选框的全选，多选，全选,全不选，反选
05-24
NULL 博文链接：https://heisetoufa.iteye.com/blog/356077
html全选反选
12-06
很简单的html全选反选，适合刚开始学习html的同学，非常实用。
javascript用DOM实现 复选框的全选、反选、全不选
永不停歇
03-04 2348
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
09-Dom操作复选框（全选、全不选、反选）
高调做事，低调做人！
10-08 1552
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> Insert title here 您的爱好很广泛！！！ 全选/全不选
JavaScript简单DOM案例（全选、不选、反选）
编程大白菜
11-16 627
JavaScript简单DOM案例（全选、不选、反选） 准备一个商品列表，每个商品上有一个复选框，点击不同按钮实现全选、全不选、反选效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table width="800px" align="c
JavaScript实现全选、全不选、反选功能
whr
10-11 957
JavaScript实现全选、全不选、反选功能
JavaScript DOM 全选/全不选，反选练习
weixin_30856965的博客
07-30 958
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""...
全选和反选
魂断楼兰的博客
11-29 296
全选和反选<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { w
html复选框的全选和全不选
热门推荐
qq_38409944的博客
05-17 1万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;script&amp;gt; function checkAll(){ //1.获取编号前面的复选框 var checkAllEle = document.getElement
原生dom实现增删改查，全选反选
06-13
好的，下面是原生DOM实现增删改查、全选反选的示例代码： ```html <!DOCTYPE html> <html> <head> <title>DOM增删改查、全选反选</title> </head> <body> <h3>DOM增删改查、全选反选示例</h3> <!-- 添加元素 --> <input type="text" id="add-input"> <button id="add-btn">添加</button> <!-- 显示元素列表 --> <ul id="list"></ul> <!-- 删除元素 --> <button id="delete-btn">删除</button> <!-- 修改元素 --> <input type="text" id="edit-input"> <button id="edit-btn">修改</button> <!-- 全选反选 --> <input type="checkbox" id="check-all"> <label for="check-all">全选/反选</label> <script> // 先获取相关的DOM元素 var addInput = document.getElementById('add-input'); var addBtn = document.getElementById('add-btn'); var list = document.getElementById('list'); var deleteBtn = document.getElementById('delete-btn'); var editInput = document.getElementById('edit-input'); var editBtn = document.getElementById('edit-btn'); var checkAll = document.getElementById('check-all'); // 添加元素 addBtn.onclick = function() { var text = addInput.value.trim(); if (text) { var li = document.createElement('li'); li.innerHTML = '<input type="checkbox"> ' + text; list.appendChild(li); addInput.value = ''; } }; // 删除元素 deleteBtn.onclick = function() { var checkboxes = list.getElementsByTagName('input'); for (var i = checkboxes.length - 1; i >= 0; i--) { if (checkboxes[i].checked) { list.removeChild(checkboxes[i].parentNode); } } }; // 修改元素 editBtn.onclick = function() { var checkboxes = list.getElementsByTagName('input'); for (var i = checkboxes.length - 1; i >= 0; i--) { if (checkboxes[i].checked) { var text = editInput.value.trim(); if (text) { checkboxes[i].parentNode.innerHTML = '<input type="checkbox"> ' + text; editInput.value = ''; } } } }; // 全选反选 checkAll.onclick = function() { var checkboxes = list.getElementsByTagName('input'); for (var i = checkboxes.length - 1; i >= 0; i--) { checkboxes[i].checked = checkAll.checked; } }; </script> </body> </html> ``` 这个示例实现了以下功能： 1. 输入框输入内容后，点击“添加”按钮可以将内容添加到列表中。 2. 点击“删除”按钮可以删除列表中选中的元素。 3. 输入框输入内容后，点击“修改”按钮可以将列表中选中的元素的文本修改为输入框中的内容。 4. 点击“全选/反选”复选框可以全选或反选列表中的所有元素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值