html dom反选,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朋友们的推荐下使用了很多各种各样的软件,当然选择一款真正适合自己的工具也是很重要,在这里就把我使用过的工具都介绍一下. 主要有 ...