用javascript做的简单复选框的全选与反选
来源：互联网 发布：鲁班软件收费吗 编辑：程序博客网 时间：2024/06/11 07:47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<style type="text/css"></style>
</head>
<body>
<table border='1' width='400' align='center' style='border-collapse:collapse;'>
<tr>
<th>序号</th>
<th>标题</th>
<th>发布时间</th>
<th>删除</th>
</tr>
<tr>
<td>1</td>
<td>上班</td>
<td>2016-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>2</td>
<td>下班</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>3</td>
<td>吃饭</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>4</td>
<td>睡觉</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' value='全选' id='check_all' />
<input type='button' value='取消' id='deselect' />
<input type='button' value='反选' id='invert_select' />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var in_check_all =document.getElementById("check_all");
var inp_name =document.getElementsByName("check");
var in_deselect =document.getElementById("deselect");
var in_invert_select =document.getElementById("invert_select");
//设置全选
in_check_all.onclick = function(){
for(var i=0;i<inp_name.length;i++){
inp_name[i].checked=true;
}
}
//设置取消
in_deselect.onclick =function (){
for(var i= 0 ;i<inp_name.length;i++){
inp_name[i].checked =false;
}
}
//设置反选
in_invert_select.onclick =function (){
for(var i =0 ;i<inp_name.length;i++){
if(inp_name[i].checked){
inp_name[i].checked=false;
}else{
inp_name[i].checked=true;
}
}
}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<meta name="author" content="小滨滨" />
<style type="text/css"></style>
</head>
<body>
<table border='1' width='400' align='center' style='border-collapse:collapse;'>
<tr>
<th>序号</th>
<th>标题</th>
<th>发布时间</th>
<th>删除</th>
</tr>
<tr>
<td>1</td>
<td>上班</td>
<td>2016-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>2</td>
<td>下班</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>3</td>
<td>吃饭</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td>4</td>
<td>睡觉</td>
<td>2018-3-20</td>
<td><input type='checkbox' name='check'/></td>
</tr>
<tr>
<td colspan='4' align='right'>
<input type='button' value='全选' id='check_all' />
<input type='button' value='取消' id='deselect' />
<input type='button' value='反选' id='invert_select' />
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var in_check_all =document.getElementById("check_all");
var inp_name =document.getElementsByName("check");
var in_deselect =document.getElementById("deselect");
var in_invert_select =document.getElementById("invert_select");
//设置全选
in_check_all.onclick = function(){
for(var i=0;i<inp_name.length;i++){
inp_name[i].checked=true;
}
}
//设置取消
in_deselect.onclick =function (){
for(var i= 0 ;i<inp_name.length;i++){
inp_name[i].checked =false;
}
}
//设置反选
in_invert_select.onclick =function (){
for(var i =0 ;i<inp_name.length;i++){
if(inp_name[i].checked){
inp_name[i].checked=false;
}else{
inp_name[i].checked=true;
}
}
}
</script>
注释：当新手看到这题时，应该先把复选框所需要的外部体先做出，分析如何chekbox的属性，然后给以最通易的就是给所需要控制的按钮来加id，而给同类属性的加name
然后通过onlick点击事件来控制如何操作
0 0
- 用javascript做的简单复选框的全选与反选
- 复选框的全选与反选
- jquery做复选框的全选、全部选、反选更加简单
- javascript ： 复选框的单选，全选，全不选，反选。
- JavaScript基础 复选框的全选和反选
- JavaScript基础—复选框的全选和反选
- javaScript实现复选框的全选反选事件
- 简单实现 复选框的全选反选
- Javascript Jquery 复选框的全选、单选与反选、批量删除
- js实现复选框的全选与反选
- js实现复选框的全选与反选
- 实现复选框的全选与反选
- Jsp中复选框的全选与反选
- jquery实现复选框的全选与反选
- checkbox复选框的全选与反选
- jquery实现复选框(checkbox)的全选与反选
- 复选框的全选、全不选、反选
- 复选框的全选、反选、全不选
- MFC - HTTP（post与get）请求网页内容或图片
- 广播的action的监听的name（Android中的Broadcast Action大全）
- 精通SQL视图用法
- 办公随笔
- MySQL数据库离线包安装与注册
- 用javascript做的简单复选框的全选与反选
- 20-Integer to Roman-Leetcode
- 环境搭建之maven分布式系统
- Gradle项目构建（1）——Gradle的由来
- 调查问卷问题选项动态删除的实现
- 欧几里得算法及扩展欧几里得算法
- hdu_1864_最大报销额
- 多线程的单例设计模式
- 开源GIS体系结构
