js实现复选框的全选、全不选、反选
js中实现复选框的全选,全不选以及反选,分为两种情况:
(1)选中“请选择”前面的复选框实现全选,不选中“请选择”前面的复选框实现全不选
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<title>无标题文档</title>
</head>
<script>
function check_inter(){
var inters = document.getElementsByName("inter");
for(var i=0;i<inters.length;i++){
if(document.getElementById("cbox").checked==true){
inters[i].checked = true;
}else{
inters[i].checked = false;
}
}
}
</script> <body>
<input type="checkbox" id="cbox" value="" onclick="check_inter()"/>请选择</br>
<input type="checkbox" name="inter" value="下棋"/>下棋</br>
<input type="checkbox" name="inter" value="游戏"/>游戏</br>
<input type="checkbox" name="inter" value="看书"/>看书<br/>
</body>
</html>
(2)全选、全不选、反选三个按钮实现
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
//全选,全不选
function checkall(param){
var inters = document.getElementsByName("inter");
for(var i=0;i<inters.length;i++){
if(!param){
inters[i].checked = true;
}else{
inters[i].checked = false;
}
}
}
//反选
function uncheck(){
var inters = document.getElementsByName("inter");
for(var i=0;i<inters.length;i++){
inters[i].checked = !inters[i].checked;
}
} </script> <body>
<input type="checkbox" name="inter" value="下棋"/>下棋<br/>
<input type="checkbox" name="inter" value="游戏"/>游戏<br/>
<input type="checkbox" name="inter" value="看书"/>看书<br/>
<input type="button" onclick="checkall()" value="全选"/>
<input type="button" onclick="checkall('un')" value="全不选"/>
<input type="button" onclick="uncheck()" value="反选"/>
</body>
</html>
js实现复选框的全选、全不选、反选的更多相关文章
- 复选框(checkbox)、多选框
1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...
- Flutter学习(8)——CheckBox多选框使用及动态更改多选框数据
原文地址:Flutter学习(8)--CheckBox多选框使用及动态更改多选框数据 | Stars-One的杂货小窝 最近项目需求需要调整页面,记录一下实现过程 这次主要是要实现个评价页面,选择不同 ...
- jQuery对复选框(checkbox)的全选,全不选,反选等的操作
效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- 复选框(checkox)全选、全不选、反选、获得选中项值的用例
HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...
- 组合框里添加复选框的方法(使用勾选的假象,用图片代替而已,并非QT原生支持)
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
- 复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面
<%@include file="/common/head.jsp"%> <%@ page contentType="text/html; charse ...
- checkbox 多选框 :jquery之全选、全不选、反选
javascriptjqueryselectAll [html] view plaincopy <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- checkbox复选框,如何让其勾选时触发一个事件,取消勾选时不触发
<input type="checkbox" onclick="checkboxOnclick(this)" /> <script> f ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- OD调试程序3
条件跳转指令的图片,作为以后的参考. 载入了reverses.eve程序,F8下去,发现一个跳转,调用了一个函数,致使程序结束.于是我们绕过它,参考上面的 跳转指令图片. 然后继续F8 又会发现一个跳 ...
- iOS传值方式:属性,代理,block,单例,通知
正向传值均可,反向传值除属性传值不可,其余均可.下面简单介绍: (一)属性传值 第二个界面中的lable显示第一个界面textField中的文本 首先我们建立一个RootViewControllers ...
- 移动端 meta 标签笔记
(转自http://www.cssue.com/xhtml-css/html5-css3/mobile-meta.html,版权归原作者所有!) 移动平台对 meta 标签的定义 一.meta 标签分 ...
- SqlSever2005 一千万条以上记录分页数据库优化经验总结
http://www.cnblogs.com/jirigala/archive/2010/11/03/1868011.html 待测试???
- Linux Qt动态库的创建和使用
一.创建动态库 编写一个共享库类,比如: //..base.h class Base : public QObject { Q_OBJECT public: ); void PrintLog(QStr ...
- js实现对比百分比
<script> for(var i=1;i<=3;i++){ for(var j=2;j<=4;j++){ var hid="w_"+4+j+" ...
- autoproxy 规则
目前在 gfwList 中,有如下的规则格式: example.com 匹配:http://www.example.com/foo匹配:http://www.google.com/search?q=w ...
- 227. Basic Calculator II
Implement a basic calculator to evaluate a simple expression string. The expression string contains ...
- Codeforces Round #313 (Div. 2) A B C 思路 枚举 数学
A. Currency System in Geraldion time limit per test 2 seconds memory limit per test 256 megabytes in ...
- dll清理
結束了閉關,又得與人類交流了,只好裝QQ 印象中企鵝手腳一向是BAT中最乾淨的-結果還是裝了不少樂色,一併挖出來除之 C:\program files\common files\tencent\q ...