js-dom对checkbox处理

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

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

本文介绍了一个使用HTML和JavaScript创建的动态表格示例。通过JavaScript实现了表格行的背景色切换、鼠标悬停效果增强及全选、反选等功能。这为初学者提供了一个实用的代码案例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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
关注
功能实现：在table中点击某一行，选中前面的checkbox并改变背景色
snoopy_ly的博客
03-04 4615
html  table：&lt;table id="mytable"&gt; &lt;tr&gt; &lt;th rowspan="2"&gt;&lt;input type="checkbox" id="selectAll"&gt;&lt;/th&gt;     &lt;th rowspan="2"&amp
DOM选中和取消所有的checkbox
HuashirenYty的博客
10-24 355
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 342
使用Js 简单实现tr点击 tr前的checkbox选中或取消 [code="html"] New Document 多选 内容 信息一 信息二 信息三 ...
vue中判断table 里面type=checkbox的是否选中属性及使用方法
weixin_41262185的博客
08-04 5403
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
表格中点击行触发checkbox选中或取消和取值
qq_24223679的博客
07-21 2210
checkbox的选择因为其较小，用户点选操作较不方便，在DIV中可以通过label扩充其操作区域，在表格中也可以通过点选行来操作checkbox的选中或取消。方法如下备用，有更好方法，也请各位看官留言指导，共同进步。 1、在行中增加鼠标左键点击动作，例：
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中复选框强制刷新的...
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练习-用户名密码校验（表单校验） 带注释/总结
表格中当选中行控制复选框也能选中
yuanyuan214365的博客
05-23 598
目的：行选择能触发复选框被选中 这是网上找到的一个例子 这个需求是在项目完成后客户提出的要求,看似简单但是还需要一点小手脚 Js代码 收藏代码 $(".list tr").slice(1).each(function(){ var p = this; $(this).children().slice(1).click(function(){ $(
js 动态添加Table tr，选中与不选中checkbox行数NO的变化
weixin_30443895的博客
03-02 184
首次加载进入页面，如图： 注：Table是在js中拼接字符串循环动态添加的（拼接字符串，详见之前随笔） 点击Line2 checkbox后，效果如图： 实现的效果就是： 点击checkbox — 显示本行的其他列的textbox，同时动态新增下一行NO行数+1，其他列的textbox隐藏； 取消checkbox —remove...
点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件
qq_30352261的博客
08-02 1221
//tr的点击事件 $("tr").click(function(e){ //找到CheckBox var check = $(this).find("input[type='checkbox']"); if(check){ var flag = check[0].checked;//获取当前状态 if(flag){...
js DOM练习，做一个单选多选全选的form表单
weixin_44154094的博客
01-17 587
看效果图 注意其中可能出现的几个bug 1.点击全选单选框后也应该全选，取消选择其余四个也应该取消选择 2.点击全选多选框以后，正常情况下四个都选中，取消一个选中，多选框也应该取消选中 3.点击全选按钮以后，全选多选框也应该选中 4.点击全不选按钮以后，全选多选框也应该取消选择 5.点击全选按钮以后，点击全不选，多选框应该发生变化 2.上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8">
点击table中的一行选中checkbox,并改变该行的颜色
热门推荐
程诺
08-05 2万+
首先规定一个选中时的样式：.bgRed{ background-color: #b2dba1; }table的代码如下：<table> <tr> <th><input type="checkbox" id="checkAll"> 序号</th> <th>所属机构</th> <th>姓名</th> <th>手机号码</th
点击table的某一行则前面的CheckBox被选中
weixin_34290631的博客
02-04 662
为了提高用户体验度，往往需要用户一点击行，则前面的CheckBox被选中。如下： 1.首先设置table的id为“Qub_tb_List” 2.利用JavaScript实现 <script type="text/javascript"> //点击行勾选 $("#Qub_tb_List").on("click", "tr", function ()...
【JavaScript】DOM操作复选框
weixin_33701251的博客
08-26 149
DOM操作复选框 实现一个效果如下图: 点击"全选/全不选"复选框之后，足球、篮球、游泳和唱歌均被选取。取消"全选/全不选"复选框之后，被选中的所有都变成未选中。点击"全选"按钮之后，足球、篮球、游泳和唱歌均被选取，点击"全不选"之后，被选中的所有都变成未选中。点击反选之后，未选中的变成选中的，选中的变成未选中的。 下面我们来实现这个效果。 源代码:&...
element(表格当点击表格前面复选框的时候获取当前某一行数据)
weixin_43869524的博客
01-16 4641
element(表格当点击表格前面复选框的时候获取当前某一行数据)
el-table-column 单选checkbox显示label
最新发布
08-08
<think>首先，用户的问题是：“我想在使用el-table-column时，如何让单选checkbox显示label”。用户提到了el-table-column和单选checkbox，这似乎是基于Element UI框架的Vue.js组件。 从引用中： - 引用[1]提到了Element UI中的复选框（el-checkbox-group）的使用，其中label属性用于设置每个复选框的标签。 - 引用[2]提到了Element UI中的table组件，包括如何添加进度条和使用tree进行单选多选。 - 引用[3]讨论了使用JSX在Vue组件中渲染动态内容。 用户的具体需求是：在el-table-column中使用单选checkbox时显示label。el-table-column是Element UI表格的列定义，通常用于显示数据。用户可能想在表格的每一行中添加一个单选复选框，并显示标签。 在Element UI的表格中，添加单选按钮通常可以通过使用作用域插槽（scoped slot）来实现。用户提到了“单选checkbox”，所以我需要确保它是单选模式，而不是多选。 关键点： - 在Element UI中，表格本身不支持直接添加单选按钮；需要通过自定义列内容来实现。 - 使用<el-table-column>的scoped slot来插入自定义内容，比如<el-radio>或<el-checkbox>，但需要设置为单选。 用户说“单选checkbox”，在Element UI中，复选框通常是多选的，但可以设置为单选模式。更常见的是使用单选按钮（el-radio）。用户可能指的是单选按钮，因为复选框通常是多选的。但用户说“checkbox”，所以我应该基于复选框来实现单选行为。 在引用[1]中，有el-checkbox-group的使用，但那是用于一组复选框，不是直接在表格中。在表格中，我们需要为每一行添加一个复选框，并管理单选行为。 实现步骤： 1. 在el-table-column中使用scoped slot来定义自定义内容。 2. 在slot中，使用<el-radio>或<el-checkbox>组件。如果用户坚持使用checkbox，我们可以通过事件处理来模拟单选行为。 3. 设置label属性来显示文本。 在Element UI中，<el-radio>有一个label属性，用于设置显示的文本。类似地，<el-checkbox>也有label属性。 为了在表格中实现单选： - 使用<el-radio-group>包裹，但表格中每一行独立，所以通常使用一个变量来存储当前选中的行ID。 - 在scoped slot中，为每一行渲染一个单选按钮或复选框，并根据当前选中状态设置checked属性。 用户要求“显示label”，意思是显示复选框旁边的文本标签。 在Element UI中，<el-checkbox>的label属性可以是一个字符串，用于显示文本。例如：<el-checkbox label="Option 1">。 在表格列中实现： - 在el-table-column中，使用template slot。 - 在slot中，使用<el-checkbox>或<el-radio>，并设置其label属性。 - 为了单选，需要绑定一个v-model到当前选中的值，并确保只有一个被选中。 示例代码结构： ```vue <el-table :data="tableData"> <el-table-column label="选择" width="100"> <template slot-scope="scope"> <el-radio v-model="selectedRow" :label="scope.row.id">{{ scope.row.label }}</el-radio> <!-- 或者使用checkbox模拟单选 --> <el-checkbox v-model="selectedRow" :label="scope.row.id" @change="handleChange(scope.row)">{{ scope.row.name }}</el-checkbox> </template> </el-table-column> <!-- 其他列 --> </el-table> ``` 在数据中，tableData是一个数组，每个对象有id、label等属性。 selectedRow是一个变量，存储当前选中的行ID。 如果使用<el-checkbox>，需要处理change事件来确保单选：当选中一个时，清空其他。 但更简单的是使用<el-radio>，因为它天然支持单选。 用户说“单选checkbox”，所以我可以建议使用radio，或者解释如何用checkbox模拟。 在回答中，我需要使用中文，结构清晰。 参考引用： - 引用[1]展示了el-checkbox-group的使用，label属性用于设置值。 - 引用[2]提到了在table中添加组件。 - 引用[3]是关于JSX，但用户可能不需要，因为这是Vue模板。 用户的问题是基于上一次问题和我的回答，但这是第一个问题，所以不需要历史。 回答结构： 1. 解释问题：在el-table-column中实现单选复选框并显示标签。 2. 提供实现方法：使用scoped slot和<el-radio>或<el-checkbox>。 3. 给出代码示例。 4. 确保LaTeX格式正确，但这里没有数学表达式，所以可能不需要。 5. 在末尾添加引用标识。 6. 生成相关问题。 系统指令说：生成相关问题，并在回答中引用的段落末尾自然地添加引用标识。 在回答中，如果我引用引用[1]、[2]、[3]，就在末尾加[^1]等。 但在这个问题中，用户提供了引用，我需要参考它们。 在回答中： - 当提到复选框用法时，可以引用[1]。 - 当提到table组件时，引用[2]。 - 如果涉及JSX，引用[3]，但可能不相关。 用户真正的需求是实现，所以我应该基于Element UI文档。 最后，生成相关问题。 完整回答： - 开头：直接回答问题。 - 主体：步骤和代码。 - 结尾：相关问题。</think>### 在Element UI表格中实现单选复选框并显示标签 在Element UI的`el-table-column`中实现单选复选框（checkbox）并显示标签（label），需要通过自定义列内容结合作用域插槽（scoped slot）来实现。Element UI的表格组件本身不直接支持内置的单选复选框列，但可以通过以下步骤手动实现。核心思路是： 1. 使用`<template slot-scope="scope">`定义自定义列内容。 2. 在列内嵌入`<el-radio>`或`<el-checkbox>`组件（推荐使用`<el-radio>`实现天然单选行为）。 3. 通过`v-model`绑定一个变量来管理当前选中的行，并设置`label`属性显示文本标签。 4. 确保单选逻辑：当选中一行时，自动取消其他行的选中状态。 以下是详细实现方法（基于Vue.js和Element UI）： #### 步骤1：定义表格数据和选中状态变量 在Vue组件的`data`中定义表格数据`tableData`和一个变量`selectedRow`来存储当前选中的行ID（或其他唯一标识）。 ```javascript data() { return { tableData: [ { id: 1, label: '选项A', name: '设备A' }, { id: 2, label: '选项B', name: '设备B' }, { id: 3, label: '选项C', name: '设备C' } ], selectedRow: null // 存储当前选中的行ID }; } ``` #### 步骤2：在`el-table-column`中使用作用域插槽 在表格列中，使用`<template slot-scope="scope">`插入单选组件。这里以`<el-radio>`为例（更符合单选需求），并设置`label`属性显示文本： ```vue <el-table :data="tableData"> <!-- 其他列 --> <el-table-column label="名称" prop="name"></el-table-column> <!-- 单选复选框列 --> <el-table-column label="选择" width="120"> <template slot-scope="scope"> <!-- 使用el-radio实现单选，label属性显示文本 --> <el-radio v-model="selectedRow" :label="scope.row.id" @change="handleRadioChange(scope.row)" > {{ scope.row.label }} <!-- 这里显示标签文本 --> </el-radio> </template> </el-table-column> </el-table> ``` - **关键点**： - `v-model="selectedRow"`：绑定到`selectedRow`变量，确保只有一个选项被选中。 - `:label="scope.row.id"`：将单选按钮的值设置为行ID，用于标识选中项。 - `{{ scope.row.label }}`：直接显示行数据中的标签文本（如"选项A"）。 - `@change="handleRadioChange"`：可选事件，用于处理选中时的逻辑（如日志记录）。 #### 步骤3：处理单选逻辑（可选） 如果需要额外逻辑，可在`methods`中添加事件处理： ```javascript methods: { handleRadioChange(row) { console.log('选中行:', row.id, '标签:', row.label); // 这里可以添加业务逻辑，如更新后端或过滤数据 } } ``` #### 使用`<el-checkbox>`模拟单选（替代方案） 如果坚持使用复选框（checkbox）模拟单选，需手动处理选中逻辑。例如： ```vue <el-table-column label="选择" width="120"> <template slot-scope="scope"> <el-checkbox :label="scope.row.label" <!-- 设置label属性显示文本 --> :checked="selectedRow === scope.row.id" @change="(val) => handleCheckboxChange(val, scope.row)" > {{ scope.row.label }} <!-- 显示标签 --> </el-checkbox> </template> </el-table-column> ``` 在方法中强制单选： ```javascript methods: { handleCheckboxChange(val, row) { if (val) { this.selectedRow = row.id; // 选中当前行 } else { this.selectedRow = null; // 取消选中 } } } ``` - **注意**：此方法需额外维护状态，不如`<el-radio>`简洁[^1]。 #### 注意事项 1. **标签显示**：`label`属性可直接绑定到行数据的字段（如`scope.row.label`），文本会渲染在复选框旁边。 2. **性能优化**：对于大数据量，建议使用`row-key`属性提升渲染效率。 3. **样式调整**：可通过CSS自定义标签样式，例如： ```css .el-radio__label { font-weight: bold; } /* 加粗标签 */ ``` 4. **引用参考**：Element UI的表格自定义列和复选框组用法类似引用[1]中的`el-checkbox-group`实现[^1]，而动态渲染逻辑可借鉴引用[3]的JSX模式[^3]。 ### 相关问题 1. 如何在Element UI表格中实现多选复选框并显示标签？ 2. Element UI的单选按钮（el-radio）和复选框（el-checkbox）在性能上有何差异？ 3. 如何在表格中动态生成列内容（如根据后端数据渲染不同标签）？ [^1]: 引用[1]展示了`el-checkbox-group`中`label`属性的用法，可用于设置复选框的值和显示文本。 [^2]: 引用[2]涉及Element UI表格的扩展用法，如添加自定义组件。 [^3]: 引用[3]介绍了使用JSX动态生成DOM的方法，适用于复杂渲染逻辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值