js实现复选框的操作-------Day41
不知道之前的一篇为什么一直处于审核阶段。难道有哪个词语是敏感词被河蟹了?
无论了,又一次写了这篇,也算是加深记忆吧。
首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选,首先来编写下html语言
<table>
<thead>
<tr>
<td><input type="checkbox" id="sall" onchange="changeAll()"></td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="each" value="1"></td>
</tr>
<tr>
<td><input type="checkbox" name="each" value="2"></td>
</tr>
<tr>
<td><input type="checkbox" name="each" value="3"></td>
</tr>
<tr>
<td><input type="checkbox" name="each" value="4"></td>
</tr>
</tbody>
</table>
来写一下从网上搜罗后终于实现的比較简单明了的写法。比自己写的好了不止一倍啊
function changeAll(){
var sall=document.getElementById("sall");//获取标题栏中的操作对象
var seach=document.getElementsByName("each");//获取内容栏的对象
for(var i=0;i<seach.length;i++){
if (sall.checked) {
seach[i].checked=true;
}else{
seach[i].checked=false;
}
}
}
来分析下它的实现方法,比自己写的果断要好了不少,自己当时採取了两种方法,可是远不如这个成型的简单介绍明了。自己的全用id来操作确实又臭又长了。
对复选框的操作还有比較常见的复选框。就上面这个样例来的话。我们来实现下:onchange="change()"
function change(){
var seach=document.getElementsByName("each");
for(var i=0;i<seach.length;i++){
seach[i].checked=!seach[i].checked;
}
}
最后。对复选框的最经常使用的就是获取某一列的信息,从而实现传值。这里我们来获取下值:
var seach=document.getElementsByName("each");
for(var i=0;i<seach.length;i++){
if(seach[i].checked){
alert(seach[i].value);
}
}
不知道自己到底坚持的是什么了。这样又一次编写一遍的话,效果上来说,实在没有第一遍来的那么好。无论那么多了,加油吧,菜鸟飞飞飞....
js实现复选框的操作-------Day41的更多相关文章
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js实现复选框的全选、全不选和反选
js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- selenium--单选框和复选框的操作
单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询
这是界面代码: function shua(){ var id_array=new Array(); $('input[id="checkAll& ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- UI控件设置
去掉cesium默认的版权信息: 在style样式中添加 .cesium-widget-credits {display:none !important} 去掉动画控件.地址搜索控件.图层选择控件.操 ...
- 【转载】02-PowerDesigner的下载及安装
原创路径:https://blog.csdn.net/ruyu00/article/details/79842807 一.下载 下载路径:https://pan.baidu.com/s/1WD7QHT ...
- Qt之图形(简笔画-绘制漂亮的西瓜)
简述 Summer is coming-我们呢,为大家准备了丰盛的佳果-西瓜,清爽解渴,甘味多汁. 一笔一划学简笔画,分分钟让你掌握一门新技能,下面我们来绘制一个"盛夏之王"-西瓜 ...
- [Python]Use Flask-Admin with PostgreSQL
This code recipe gives you an idea of how to use Flask-Admin with postgresql database. from flask im ...
- linux下创建带password的用户
一直在做实验室linuxserver的账号管理系统,现阶段是用户申请后我这边收到邮件,然后手动创建,这个略显麻烦,打算全然做成自己主动化的.用户申请后,我直接在管理界面点击批准就可以创建用户,同一时候 ...
- ASP.NET Web开发技术的深入总结
[IT168技术]在国内.Net开发这个环境里, 中小型公司.或者大公司但主营业务不是软件开发里面的软件小团队.针对.Net开发者的要求都是十项全能型的全才, 能做的了从前台页面展现到最后数据存储的全 ...
- HDU 5274(LCA + 线段树)
Dylans loves tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Othe ...
- SQLite -- 嵌入式关系型数据库
SQLite -- 嵌入式关系型数据库 1.SQLite的数据类型:Typelessness(无类型) 1,能够保存不论什么类型的数据到表的随意列中 2.支持常见的类型如: NULL, VARCHAR ...
- [NOIP2015模拟10.22] 最小代价 解题报告 (最小生成树)
Description 给出一幅由n个点m条边构成的无向带权图.其中有些点是黑点,其他点是白点.现在每个白点都要与他距离最近的黑点通过最短路连接(如果有很多个黑点,可以选取其中任意一个),我们想要使得 ...
- 36.创建模板mylist
node.h #pragma once //创建模板 template <class T> class Node { public: T t;//数据 Node *pNext;//指针域 ...