不知道之前的一篇为什么一直处于审核阶段。难道有哪个词语是敏感词被河蟹了?

无论了,又一次写了这篇,也算是加深记忆吧。

首先要写的是今天在进行表格数据操作时用到的对复选框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的更多相关文章

  1. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  3. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

  4. selenium--单选框和复选框的操作

    单选框操作 from selenium import webdriver import unittest class Test_radio(unittest.TestCase): def test_S ...

  5. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. js实现复选框的全选、全不选、反选

    js中实现复选框的全选,全不选以及反选,分为两种情况: (1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选 <!DOCTYPE html PUBLIC " ...

  7. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  8. 使用js获取复选框的值,并把数组传回后台处理,过程使用的是Ajax异步查询

    这是界面代码: ​ function shua(){             var id_array=new Array();         $('input[id="checkAll& ...

  9. 复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...

随机推荐

  1. UI控件设置

    去掉cesium默认的版权信息: 在style样式中添加 .cesium-widget-credits {display:none !important} 去掉动画控件.地址搜索控件.图层选择控件.操 ...

  2. 【转载】02-PowerDesigner的下载及安装

    原创路径:https://blog.csdn.net/ruyu00/article/details/79842807 一.下载 下载路径:https://pan.baidu.com/s/1WD7QHT ...

  3. Qt之图形(简笔画-绘制漂亮的西瓜)

    简述 Summer is coming-我们呢,为大家准备了丰盛的佳果-西瓜,清爽解渴,甘味多汁. 一笔一划学简笔画,分分钟让你掌握一门新技能,下面我们来绘制一个"盛夏之王"-西瓜 ...

  4. [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 ...

  5. linux下创建带password的用户

    一直在做实验室linuxserver的账号管理系统,现阶段是用户申请后我这边收到邮件,然后手动创建,这个略显麻烦,打算全然做成自己主动化的.用户申请后,我直接在管理界面点击批准就可以创建用户,同一时候 ...

  6. ASP.NET Web开发技术的深入总结

    [IT168技术]在国内.Net开发这个环境里, 中小型公司.或者大公司但主营业务不是软件开发里面的软件小团队.针对.Net开发者的要求都是十项全能型的全才, 能做的了从前台页面展现到最后数据存储的全 ...

  7. HDU 5274(LCA + 线段树)

    Dylans loves tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Othe ...

  8. SQLite -- 嵌入式关系型数据库

    SQLite -- 嵌入式关系型数据库 1.SQLite的数据类型:Typelessness(无类型) 1,能够保存不论什么类型的数据到表的随意列中 2.支持常见的类型如: NULL, VARCHAR ...

  9. [NOIP2015模拟10.22] 最小代价 解题报告 (最小生成树)

    Description 给出一幅由n个点m条边构成的无向带权图.其中有些点是黑点,其他点是白点.现在每个白点都要与他距离最近的黑点通过最短路连接(如果有很多个黑点,可以选取其中任意一个),我们想要使得 ...

  10. 36.创建模板mylist

    node.h #pragma once //创建模板 template <class T> class Node { public: T t;//数据 Node *pNext;//指针域 ...