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 ...
随机推荐
- SpringBoot学习笔记(1)----环境搭建与Hello World
简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配 ...
- 洛谷P3355 骑士共存问题 二分图_网络流
Code: #include<cstdio> #include<cstring> #include<queue> #include<vector> #i ...
- 关于VS2013 Browser Link 新功能
今天小明在编写MVC项目,设计前端项目的时候,突然遇到一个问题,就是无论什么页面,当每次执行调试的时候,页面中都会自动的加上这样一行代码: <!-- Visual Studio Browser ...
- /www: target is busy. 解决卸载磁盘目录繁忙的问题
umount /www 卸载磁盘遇到 以下问题 umount: /www: target is busy. (In some cases useful info about processes tha ...
- 地图底图的类型——MapView,SceneView
MapView用于创建二维地图平面. 引用“esri/Map”,"esri/views/MapView" 具体做法并举例:var map = new Map({basemap:&q ...
- linux VNC-server
[root@kvm-server Packages]# rpm -qpi tigervnc-server-1.8.0-1.el7.x86_64.rpm Name : tigervnc-server V ...
- [LeetCode] 455. 分发饼干 assign-cookies(贪心算法)
思路: 尽量先将小饼干分配给胃口小的孩子,故而饼干和孩子胃口都应该先排序. python中,a.sort()只能用于a为list, sort()是可变对象的方法,无参数,无返回值,但会影响改变对象. ...
- 紫书 习题8-14 UVa 1616(二分+小数化分数+精度)
参考了https://www.cnblogs.com/dwtfukgv/p/5645446.html (1)直接二分答案.说实话我没有想到, 一开始以为是贪心, 以某种策略能得到最优解. 但是想了很久 ...
- 【BZOJ 1503】[NOI2004]郁闷的出纳员
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 因为所有人工资同时递减. 所以可以设置一个变化值delta. 然后每个人的初始值为k 则把k-delta加入伸展树中. 会发现del ...
- C语言之基本算法38—格式化输出10000以内的全部完数
//穷举法! /* ================================================================== 题目:求10000以内的全部完数,统计数量并以 ...