javascript练习----复选框全选，全不选，反选
第一种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{color: #000}
</style>
<script>
document.write("<ul>");
for (var i = 0; i <20; i++) { 创建20个Li
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff'); input名字要加“[]”这样后端程序取得时候为数组。
document.write("</li>");
}
document.write("</ul>");
document.write('<a href="javascript:sall()">全选 </a>'); 此a被点击的时候调用sall方法，此处是调用不是赋值所以要加上“()”。
document.write('<a href="javascript:nall()">全不选 </a>');
document.write('<a href="javascript:fall()">反选 </a>');
var unames=document.getElementsByName("ids[]");
function sall(){
for(var i=0;i<unames.length;i++){
unames[i].checked="true";
}
}
function nall(){
for(var i=0;i<unames.length;i++){
unames[i].checked="";
}
}
function fall(){
for(var i=0;i<unames.length;i++){
if(unames[i].checked){
unames[i].checked="";
}
else{
unames[i].checked="true";
}
}
}
</script>
</head>
<body>
</body>
</html>
第二种方式：
<script>
document.write("<ul>");
for (var i = 0; i <20; i++) {
document.write("<li>");
document.write('<input type="checkbox" name="ids[]" value="'+i+'">ffffffffff');
document.write("</li>");
}
document.write("</ul>");
document.write('<label for="sall"><input type="checkbox" id="sall" onclick="sall(this)">全选</label>');this把当前的checkbox对象传递给函数内部方便调用该checkbox对象。
var unames=document.getElementsByName("ids[]");
function sall(that){
for (var i = 0; i <unames.length; i++) {
unames[i].checked=that.checked;
}
}
</script>
javascript练习----复选框全选，全不选，反选的更多相关文章
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- CheckedListBoxControl 实现复选框的单选与多选功能
由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...
- 实现在DevExpress.XtraGrid.GridControl的列头绘制复选框以实现全选的功能
首先新建一个Win Form测试项目,拖一个GridControl控件到窗体上. public partial class Form1 : Form { public Form1() { Initia ...
- element-ui 里面el-checkbox多选框，实现全选单选
data里面定义了 data:[], actionids:[],//选择的那个actionid num1:0,//没选择的计数 num2:0,//选中的计数 ...
- layui 复选框checkbox 实现全选全选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- firefox(火狐)下 js中设置checkbox属性checked="checked"已有，但复选框却不显示勾选的原因
刚看到问题时以为是浏览器兼容性的原因,ie.google都能正常显示. 网上查询之后发现是jQuery的attr()方法用的不恰当. jQuery1.6之前使用attr()可以修改 ,从jQuery ...
- Yii 生成表单下拉选框及查询下拉选框
CHtml类参考: http://www.yiichina.com/api/CHtml#activeDropDownList-detail activeDropDownList() 方法 public ...
- 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了
首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...
- FineReport——JS二次开发（复选框全选）
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- Selenium2+python自动化19-单选框和复选框（radiobox、checkbox）
本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...
随机推荐
- 转：redis常用命令
一 Redis介绍 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发 ...
- 修改ecshop让订单详情里将会员地址详情全部显示
$sql = "SELECT concat(IFNULL(c.region_name, ''), ' ', IFNULL(p.region_name, ''), " . &quo ...
- linux crontab定时执行
#利用crontab定时执行url研究了两种简单方式#一利用lynx访问url yum install lynxservice crond startcrontab -einsert键* * * * ...
- java中的内存一般分成几部分？
java中的内存被分成以下四部分: ①.代码区 ②.栈区 ③.堆区 ④.静态区域 栈区:由编译器自动分配释放,存放函数的参数值.局部变量的值等:具体方法执行结束后,系统自动释放JVM内存资源 ...
- UEditor上传功能
参考文件http://www.itnose.net/detail/6307204.html 1．复制整个ueditor文件夹到项目任意目录中. 2．添加Web窗体,并按以下方式引用配置和源文件,并实例 ...
- c#之线程
//Process[] pro= Process.GetProcesses(); //foreach (var item in pro) //{ // Console.WriteLine(item); ...
- River Hopscotch(二分POJ3258)
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9263 Accepted: 3994 Descr ...
- c++map的用法 分类： POJ 2015-06-19 18:36 11人阅读 评论(0) 收藏
c++map的用法 分类: 资料 2012-11-14 21:26 10573人阅读 评论(0) 收藏 举报 最全的c++map的用法 此文是复制来的0.0 1. map最基本的构造函数: map&l ...
- Dirichlet's Theorem on Arithmetic Progressions 分类： POJ 2015-06-12 21:07 7人阅读 评论(0) 收藏
Dirichlet's Theorem on Arithmetic Progressions Time Limit: 1000MS Memory Limit: 65536K Total Submi ...
- 谷歌Chrome浏览器如何设置网页的默认编码方法
设置->高级->自定义字体->编码->utf-8