js实现复选框的操作-------Day41
2017-06-10 19:19
387 查看
不知道之前的一篇为什么一直处于审核阶段。难道有哪个词语是敏感词被河蟹了?
无论了,又一次写了这篇,也算是加深记忆吧。
首先要写的是今天在进行表格数据操作时用到的对复选框checkbox的全选和全不选,首先来编写下html语言
对复选框的操作还有比較常见的复选框。就上面这个样例来的话。我们来实现下:onchange="change()"
不知道自己到底坚持的是什么了。这样又一次编写一遍的话,效果上来说,实在没有第一遍来的那么好。无论那么多了,加油吧,菜鸟飞飞飞....
无论了,又一次写了这篇,也算是加深记忆吧。
首先要写的是今天在进行表格数据操作时用到的对复选框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
- jq实现最多复选框,js数组操作实践。
- js实现的复选框选中时的批量操作
- jq实现最多复选框,js数组操作实践。
- 实现table中checkbox复选框、以及判断checked是否被选中、js操作checkedbox选中
- js GridView 实现自动计算操作代码
- js javascript 实现复选框全选功能 删除复选框选中项功能
- js 实现复选框全选和反选
- javascript控制服务器控件-js操作CheckBoxList实现全选、反选
- js实现复选框 全选、反选、不选
- js实现对选中的多条记录进行删除操作
- js操作GridView,实现自动计算
- JS 复选框 操作JS
- js操作ListBox实现多项的添加和删除
- js表格操作图片复选框
- js操作CheckBoxList实现全选、反选
- 关于 js 实现复选框 全选
- 数据结构:线性表删除操作的php和js实现
- JS实现复选框全选问题 按类型分类CheckBox
- 用JS操作FRAME中的IFRAME及其内容的实现代码