js-dom对checkbox处理

网页邮件管理交互与选择操作
最新推荐文章于 2023-12-18 20:44:22 发布
最新推荐文章于 2023-12-18 20:44:22 发布 · 214 阅读 · 0
文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个网页界面的邮件管理交互系统，包括全选、反选、删除附件等功能，通过JavaScript实现鼠标悬停效果增强用户体验。
<!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 onload="gehang()">
<table width="800" border="0" align="center">
<tr class="top" align="center">
<th><input type="checkbox" name="q[]" onclick="qx()" />全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件内容</th>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>eee</td>
<td>eee</td>
<td>eee</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>bbb</td>
<td>bbb</td>
<td>bbb</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ccc</td>
<td>ccc</td>
<td>ccc</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)" align="center">
<td><input type="checkbox" name="q[]" /></td>
<td>ddd</td>
<td>ddd</td>
<td>ddd</td>
</tr>
<tr onmouseover="over(this)" onmouseout="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[]" onclick="qx()" />全选</th>
<td colspan="3">
<input type="button" id="qx" value="全选" onclick="qx()" />
<input type="button" id="qbx" value="全不选" onclick="qbx()" />
<input type="button" id="fx" value="反选" onclick="fx()" />
<input type="button" id="del" value="删除所选附件" onclick="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].onmouseover=function (){
oldcolor = this.className;
//重新设定新的颜色
this.className="over";
}
trlist[i].onmouseout=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
关注
jquery-tailwind-checkbox-toggle
02-25
<script src="js/jquery.tailwind-checkbox-toggle.js"> $(document).ready(function() { $(&#39;.toggle-checkbox&#39;).tailwindCheckboxToggle(); }); ``` 在JavaScript中，`tailwindCheckboxToggle`是一个自定义方法...
Vue-input框checkbox强制刷新问题
12-11
在Vue.js中，`<input type="checkbox">` 用于创建可勾选的复选框。在处理Vue组件中复选框的交互时，可能会遇到一些常见问题，比如复选框的状态更新延迟或不更新。这里我们将深入探讨如何解决Vue中复选框强制刷新的...
【JS常用代码】JS处理复选框(checkbox)
iteye_15935的博客
02-02 227
关于checkbox复选框的处理 1.判断复选框不能为空（至少勾选一项） function checktest() { var chklength=$("input[name='txtname']:checked").length; alert("长度为："+chklength); if(chklength>0) { return true...
dom checkbox
MAGANG255的博客
10-16 367
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 850
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 181
背景首先了解下 DOM 是什么文档对象模型 (DOM) 是HTML和XML文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。要改变页面的某个东西，JavaScript就需要获得对HT...
Javascript操作BOM和DOM详解（3）实例：js操作checkbox、select、table
葡萄藤的博客
12-28 674
一、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"&
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的功能，这在各种用户界面中非常常见，比如文件管理器、表格数据筛选等。 实现这一功能的关键步骤包括...
DOM练习-onkeydown事件--onmouseover事件-左侧菜单栏点击收放-图片切换-checkbox全选-表单校验
02-15
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown...【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验（表单校验） 带注释/总结
Frontend - DOM 元素操作（Select、CheckBox、Radio、Table）
是萝卜干呀的博客
12-18 1291
Select、CheckBox、Radio、Table等定义、获取值的各种操作
用jQuery方式处理checkedbox的方式
weixin_30677617的博客
04-19 141
代码如下： <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 2600
判断一个复选框是否被选中，当选中该复选框时，提示用户可以继续操作； 我已经阅读了上面的制度。 1. DOM方式如下： window.onload = function () { document.getElementById('cr').onclick = function () { if (this.checked) {
DOM选中和取消所有的checkbox
HuashirenYty的博客
10-24 366
checkAllBoxes.html <!DOCTYPE html> <html> <head> <title>选中所有checkbox</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta ...
采用dom实现复选框全选、取消效果
小田同學的博客
04-25 1093
<form action=""> 爱好：<br/> <input type="checkbox" id="all">全选<br/> <input type="checkbox" name="hobby" value="唱歌">唱歌 <input type="checkbox" name="hobby" value="跳舞">跳舞 <input type="
checkbox取消选中触发事件_DOM事件的使用---浮层
weixin_42364780的博客
12-27 1527
点开浮层、关闭浮层的例子，要求点击按钮弹出浮层点击别处关闭浮层点击浮层时，浮层不得关闭再次点击按钮，浮层消失方法一HTML<div id="wrapper" class="wrapper"> <button id="clickMe">点我</button> <div id="popover" class="popover"> &lt...
使用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 159
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。 下面我们来实现这个效果。 源代码:&...
js前端操作checkbox赋值与取值
sijihereshui的博客
04-22 5429
1. 获取到页面的元素往chackbox赋值 2. 遍历页面checkbox所有值拼成一个字符串。 上代码： <script LANGUAGE="JavaScript"> $(document).ready(function () { $.ajax({ url: '/app/certpolicy.json', ...
E:\work\project\dd\yai-webui>npm list react react-dom @vitejs/plugin-react yai-webui@0.0.1 E:\work\project\dd\yai-webui +-- @vitejs/plugin-react@4.4.1 +-- antd@5.25.1 | +-- @ant-design/cssinjs-utils@1.1.3 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @ant-design/cssinjs@1.23.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @ant-design/icons@5.6.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @ant-design/react-slick@1.1.2 | | `-- react@19.1.0 deduped | +-- @rc-component/color-picker@2.0.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @rc-component/mutate-observer@1.1.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @rc-component/qrcode@1.0.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @rc-component/tour@1.15.1 | | +-- @rc-component/portal@1.1.2 | | | +-- react-dom@19.1.0 deduped | | | `-- react@19.1.0 deduped | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- @rc-component/trigger@2.2.6 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-cascader@3.34.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-checkbox@3.5.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-collapse@3.9.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-dialog@9.6.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-drawer@7.2.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-dropdown@4.2.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-field-form@2.7.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-image@7.12.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-input-number@9.5.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-input@1.8.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-mentions@2.20.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-menu@9.16.1 | | +-- rc-overflow@1.4.1 | | | +-- react-dom@19.1.0 deduped | | | `-- react@19.1.0 deduped | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-motion@2.9.5 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-notification@5.6.4 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-pagination@5.1.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-picker@4.11.3 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-progress@4.0.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-rate@2.13.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-resize-observer@1.4.3 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-segmented@2.7.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-select@14.16.7 | | +-- rc-virtual-list@3.18.6 | | | +-- react-dom@19.1.0 deduped | | | `-- react@19.1.0 deduped | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-slider@11.1.8 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-steps@6.0.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-switch@4.1.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-table@7.50.5 | | +-- @rc-component/context@1.4.0 | | | +-- react-dom@19.1.0 deduped | | | `-- react@19.1.0 deduped | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-tabs@15.6.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-textarea@1.10.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-tooltip@6.4.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-tree-select@5.27.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-tree@5.13.1 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-upload@4.9.0 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- rc-util@5.44.4 | | +-- react-dom@19.1.0 deduped | | `-- react@19.1.0 deduped | +-- react-dom@19.1.0 deduped | `-- react@19.1.0 deduped +-- react-dom@19.1.0 | `-- react@19.1.0 deduped +-- react-vue@0.0.5 | `-- react@19.1.0 deduped +-- react@19.1.0 +-- veaury@2.6.2 | +-- react-dom@19.1.0 deduped | `-- react@19.1.0 deduped `-- vuera@0.2.7 +-- react-dom@19.1.0 deduped `-- react@19.1.0 deduped
最新发布
05-15
嗯，用户遇到了@vitejs/plugin-react的preamble检测错误，特别是他们正在使用React 19.1.0和React-DOM 19.1.0。我需要先确认这些版本是否兼容。首先，React 19相对较新，可能有一些更新导致插件不兼容。 用户之前的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值