基于JavaScript实现全选、不选和反选效果
利用javascript实现全选、不选和反选效果，这个不用多说，直接来代码，代码中自有注释帮你理解。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
// 获取所有的按钮
var btns = document.getElementsByTagName("button");
// 获取所有的选项input
var inputs = document.getElementsByTagName("input");
// 全选或者不选的时候 调用此函数
function fun(flag){
for (var i=0; i<inputs.length;i++) {
inputs[i].checked = flag;
}
}
//获取第一个按钮 “全选”
btns[0].onclick = function(){
fun(true);
}
// 获取第二个按钮 "不选"
btns[1].onclick = function(){
fun(false);
}
// 获取第三个按钮 “反选”
btns[2].onclick = function(){
// 遍历所有的选项，判断每一个选项是否被选中
for (var i=0;i<inputs.length;i++) {
inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
}
}
}
</script>
</head>
<body>
<div id="box1">
<button>全选</button>
<button>不选</button>
<button>反选</button>
</div>
<div id="box2">
<ul>
<li>选项1：<input type="checkbox"></li>
<li>选项2：<input type="checkbox"></li>
<li>选项3：<input type="checkbox"></li>
<li>选项4：<input type="checkbox"></li>
<li>选项5：<input type="checkbox"></li>
<li>选项6：<input type="checkbox"></li>
<li>选项7：<input type="checkbox"></li>
<li>选项8：<input type="checkbox"></li>
<li>选项9：<input type="checkbox"></li>
</ul>
</div>
</body>
</html>
效果展示：
其他实现效果，自行查看！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现复选框的全选和反选
话不多说,请看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form> <label for="apple">苹果</label> <input
-
js, jQuery实现全选、反选功能
js ,jq实现全选.反选功能: js:思路:1.点击全选按钮实现,下面内容全选,与反选 2.下面有一个没有选中时,全选按钮不勾选,当全部选中时才全选.这里引入一个计数器,来判断是否全部选中. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 全选<input type
-
jquery实现全选、反选、获得所有选中的checkbox
举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked","true"); }) 2.取消全选(全不选) $("#btn2").click(function(){ $("input[name='checkbox']").removeAttr
-
JQuery实现列表中复选框全选反选功能封装(推荐)
我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: $(':checkbox[data-check-target]').click(function () { var target = $(this).attr(
-
Android checkbox的listView(多选,全选,反选)具体实现方法
布局文件:[html] 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height=
-
asp.net GridView控件中模板列CheckBox全选、反选、取消
复制代码 代码如下: using System; using System.Data; using System.Data.SqlClient; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebC
-
jquery实现全选、不选、反选的两种方法
在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr(). 方法一:
-
js实现checkbox全选和反选示例
复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu
-
jquery复选框CHECKBOX全选、反选
使用方法:我们先把下面的JS保存为有个文件,到时候调用,淡然你也可以直接写在页面内,推荐使用前者,方便重用: 复制代码 代码如下: (function($){ $.fn.checkgroup = function(options){ //merge settings settings=$.extend({ groupSelector:null, groupName:'group_name', enabledOnly:false },options || {}); var ctrl_box=thi
-
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
jQuery判断checkbox(复选框)是否被选中:if($("#id").attr("checked")==true) jQuery实现checkbox(复选框)选中.全选/反选代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti