js-dom对checkbox处理

最新推荐文章于 2020-12-24 00:11:50 发布
最新推荐文章于 2020-12-24 00:11:50 发布
阅读量159 收藏
点赞数
文章标签： xhtml javascript ViewUI
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.top{
background-color:#FFFF99;
color:#66CCCC;
}
.bottom{
background-color:#FFFF99;
color:#66CCCC;
}
table{
border:1px red dashed;
border-collapse:collapse;
}
td,th{
border:#999 1px solid;
}
.one{
background-color:#99CC00;
}
.two{
background-color:#CCCC00;
}
.over{
background-color:#FF9966;
}
</style>
</head>
<body οnlοad="gehang()">
<table width="800" border="0" align="center">
<tr class="top" align="center">
<th><input type="checkbox" name="q[]" οnclick="qx()" />全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件内容</th>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr οnmοuseοver="over(this)" οnmοuseοut="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr class="bottom" align="center">
<th><input type="checkbox" name="q[]" οnclick="qx()" />全选</th>
<td colspan="3">
<input type="button" id="qx" value="全选" οnclick="qx()" />
<input type="button" id="qbx" value="全不选" οnclick="qbx()" />
<input type="button" id="fx" value="反选" οnclick="fx()" />
<input type="button" id="del" value="删除所选附件" οnclick="del()" />
</td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
function gehang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length-1;i++){
//进行遍历，并且判断
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
var oldcolor;
//实现当鼠标移动到改行，该行背景加深
trlist[i].οnmοuseοver=function (){
oldcolor = this.className;
//重新设定新的颜色
this.className="over";
}
trlist[i].οnmοuseοut=function (){
//当鼠标离开，自动还原颜色

this.className=oldcolor;

}

}
}
var arrObj = document.getElementsByName("q[]");
function qx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = true;
}
}

function qbx(){
for(var i=0;i<arrObj.length;i++){
arrObj[i].checked = false;
}
}

function fx(){
for(var i=0;i<arrObj.length;i++){
if(arrObj[i].checked==false){
arrObj[i].checked = true;
}else{
arrObj[i].checked = false;
}
}
}

</script>
iteye_3941
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
checkbox取消选中触发事件_DOM事件的使用---浮层
weixin_42364780的博客
12-27 1425
点开浮层、关闭浮层的例子，要求点击按钮弹出浮层点击别处关闭浮层点击浮层时，浮层不得关闭再次点击按钮，浮层消失方法一HTML<div id="wrapper" class="wrapper"> <button id="clickMe">点我</button> <div id="popover" class="popover"> &lt...
jquery-tailwind-checkbox-toggle
02-25
<script src="js/jquery.tailwind-checkbox-toggle.js"> $(document).ready(function() { $('.toggle-checkbox').tailwindCheckboxToggle(); }); ``` 在JavaScript中，`tailwindCheckboxToggle`是一个自定义方法...
【JS常用代码】JS处理复选框(checkbox)
iteye_15935的博客
02-02 161
关于checkbox复选框的处理 1.判断复选框不能为空（至少勾选一项） function checktest() { var chklength=$("input[name='txtname']:checked").length; alert("长度为："+chklength); if(chklength>0) { return true...
dom checkbox
MAGANG255的博客
10-16 300
pageEncoding="UTF-8"%> http://www.w3.org/TR/html4/loose.dtd"> Insert title here   25岁以下 25岁以下 25岁以下 25岁以下 25岁以下 25岁以下 25岁以下 25岁以下 25岁以下 25岁以下
dom--checkbox的用法
BarryLee的博客
07-10 767
checkbox--也就是复选框，用过邮箱的应该都知道的，点击全选复选框，下面的复选框就全选了，再点的时候又都全取消了，选中一部分，点击删除将删除所选中的邮件。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;checkbox.html&lt;/ti..
js dom动态生成checkbox_虚拟 DOM 是什么
weixin_42305648的博客
12-24 138
背景首先了解下 DOM 是什么文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。要改变页面的某个东西，JavaScript就需要获得对HT...
Vue-input框checkbox强制刷新问题
12-11
在Vue.js中，`<input type="checkbox">` 用于创建可勾选的复选框。在处理Vue组件中复选框的交互时，可能会遇到一些常见问题，比如复选框的状态更新延迟或不更新。这里我们将深入探讨如何解决Vue中复选框强制刷新的...
tree-and-checkbox.zip_JavaScript/JQuery_JavaScript_
08-11
JQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。在这个树形菜单的场景中，JQuery可以用来动态地创建、修改DOM元素，以及响应用户的交互，如点击事件。 当树形结构与复选框结合时，...
10 - JS 实现 Checkbox 中按住 Shift 的多选功能.rar
05-01
这个主题，"10 - JS 实现 Checkbox 中按住 Shift 的多选功能"，聚焦于通过按下Shift键实现连续选择多个Checkbox的功能，这在各种用户界面中非常常见，比如文件管理器、表格数据筛选等。 实现这一功能的关键步骤包括...
JS通过识别id、value值对checkbox设置选中状态
11-21
以上方法都涉及到了JavaScript和jQuery操作DOM的基本技巧，包括元素的获取、属性的读写以及数组的处理。在实际应用中，这些技巧可以灵活组合，以满足各种需求。理解并熟练掌握这些方法，对于前端开发者来说至关重要...
Javascript操作BOM和DOM详解（3）实例：js操作checkbox、select、table
葡萄藤的博客
12-28 584
一、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"&
用jQuery方式处理checkedbox的方式
weixin_30677617的博客
04-19 93
代码如下： <th><input type="checkbox" id="ckSelectAll"></th> <td><input type="checkbox" name="uid" value="${user.id}"></td> <script type="text/java...
分别用DOM方式和jQuery方式判断复选框是否被选中
为了梦，爱一生
01-20 2519
判断一个复选框是否被选中，当选中该复选框时，提示用户可以继续操作； 我已经阅读了上面的制度。 1. DOM方式如下： window.onload = function () { document.getElementById('cr').onclick = function () { if (this.checked) {
DOM选中和取消所有的checkbox
HuashirenYty的博客
10-24 288
checkAllBoxes.html <!DOCTYPE html> <html> <head> <title>选中所有checkbox</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta ...
采用dom实现复选框全选、取消效果
小田同學的博客
04-25 1010
<form action=""> 爱好：<br/> <input type="checkbox" id="all">全选<br/> <input type="checkbox" name="hobby" value="唱歌">唱歌 <input type="checkbox" name="hobby" value="跳舞">跳舞 <input type="
使用js操作checkbox
热门推荐
辰辰呐的博客
12-17 1万+
原文出处：https://blog.csdn.net/fengzhen8023/article/details/81304171  一.使用原生JavaScript判断是否选中checkbox框 &lt;input type="checkbox" id="test" class="test"&gt;同意 &lt;script&gt; // 获取checkbox元素 var b...
【JavaScript】DOM操作复选框
weixin_33701251的博客
08-26 123
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。 下面我们来实现这个效果。 源代码:&...
js前端操作checkbox赋值与取值
sijihereshui的博客
04-22 5293
1. 获取到页面的元素往chackbox赋值 2. 遍历页面checkbox所有值拼成一个字符串。 上代码： <script LANGUAGE="JavaScript"> $(document).ready(function () { $.ajax({ url: '/app/certpolicy.json', ...
怎么在el-table__fixed-body-wrapper选中checkbox高亮当前行
最新发布
09-08
在以上代码中，我们通过监听el-table__fixed-body-wrapper的click事件，判断点击的目标元素是否为checkbox，如果是，则判断checkbox的选中状态，根据选中状态给当前行的DOM节点增加或移除highlight类，从而实现高亮...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值