js-dom对checkbox处理

最新推荐文章于 2019-10-24 13:40:10 发布
原创 最新推荐文章于 2019-10-24 13:40:10 发布 · 577 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#function #button #border #input #xhtml #javascript

本文介绍了一个使用HTML和JavaScript创建的动态表格示例。通过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>
byn10
关注
jquery-tailwind-checkbox-toggle
02-25
<script src="js/jquery.tailwind-checkbox-toggle.js"> $(document).ready(function() { $('.toggle-checkbox').tailwindCheckboxToggle(); }); ``` 在JavaScript中，`tailwindCheckboxToggle`是一个自定义方法...
Vue-input框checkbox强制刷新问题
12-11
在Vue.js中，`<input type="checkbox">` 用于创建可勾选的复选框。在处理Vue组件中复选框的交互时，可能会遇到一些常见问题，比如复选框的状态更新延迟或不更新。这里我们将深入探讨如何解决Vue中复选框强制刷新的...
DOM选中和取消所有的checkbox
HuashirenYty的博客
10-24 374
checkAllBoxes.html <!DOCTYPE html> <html> <head> <title>选中所有checkbox</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta ...
点击Html页面中Table上的tr 实现Tr前的checkbox选中或取消
iteyedbh0512
06-29 365
使用Js 简单实现tr点击 tr前的checkbox选中或取消 [code="html"] New Document 多选 内容 信息一 信息二 信息三 ...
表格中当选中行控制复选框也能选中
yuanyuan214365的博客
05-23 612
目的：行选择能触发复选框被选中 这是网上找到的一个例子 这个需求是在项目完成后客户提出的要求,看似简单但是还需要一点小手脚 Js代码 收藏代码 $(".list tr").slice(1).each(function(){ var p = this; $(this).children().slice(1).click(function(){ $(
js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据
lijiaren_092008的专栏
04-26 9096
js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据 如下是在js中通过DOM方式创建的row中的一列为CheckBox类型。 var row = document.createElement('tr'); //创建行 var checkbox = document.createElement('td');//创建列 ...
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练习-用户名密码校验（表单校验） 带注释/总结
DOM（十）使用DOM设置单选按钮、复选框、下拉菜单
weixin_34232744的博客
01-13 440
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象，但每次只能选一个。每一个都有checked属性，当一项选择为ture时，其它的都变为false. 先贴沙漠化一个例子： <script type="text/javascript"> function getChoice() { ...
js给table每个tr添加双击事件
热门推荐
junshangshui的专栏
05-06 3万+
无标题页 function Test(){ var rows=document.getElementById("table1").rows; if(rows.length>0){ for(var i=1;i<rows.length;i++){ (function(i){
点击tr选中每一行前面的checkbox
冰河时代
09-10 4858
.blue { background: #006CB7; } .pox { background: #255625; } Table heading Table heading Table heading Table heading Table heading Table heading Table cell Table
点击table的某一行则前面的CheckBox被选中
weixin_34290631的博客
02-04 673
为了提高用户体验度，往往需要用户一点击行，则前面的CheckBox被选中。如下： 1.首先设置table的id为“Qub_tb_List” 2.利用JavaScript实现 <script type="text/javascript"> //点击行勾选 $("#Qub_tb_List").on("click", "tr", function ()...
layui之table checkbox初始化时选中对应选项
qq_38698753的博客
06-01 1万+
这个问题需要后台返回的数据格式跟layui中的示例中返回数据格式一模一样下面是数据格式参考，第一个LAY_CHECKED:true是让checkbox选中的最重要的参数LAY_CHECKED:truecity:"浙江杭州"email:"xianxin@layui.com"experience:"12"id:"10002"ip:"192.168.0.8"joinTime:"2016-10-14&amp
vue中判断table 里面type=checkbox的是否选中属性及使用方法
weixin_41262185的博客
08-04 5437
vue中判断table 里面type=checkbox的是否选中属性及使用方法 1、&lt;thead&gt; &lt;tr class="data-order" data-order="id" data-sort="1"&gt; &lt;th class="order" data-order="&q
使用element中的table组件，如何单击某一行数据时选中对应的复选框
huangmin113659的专栏
06-12 3146
<el-table @row-click="clickRow" ref="moviesTable" :data="insertModel.tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"/> ...
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相对较新，可能有一些更新导致插件不兼容。 用户之前的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值