利用js实现全选、反选、全不选(button)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script type="text/javascript">
window.onload=function(){
var allSelect=document.getElementById("allSelect");
var noSelect=document.getElementById("noSelect");
var btn2=document.getElementById("btn2");
// 获取所有的input标签
var oDiv=document.getElementById("chk");
var chks=oDiv.getElementsByTagName("input");
allSelect.onclick=function(){
for(var i=0;i<chks.length;i++){
chks[i].checked=true; // 全部选中
}
};
noSelect.onclick=function(){
// 全不选
for(var i=0;i<chks.length;i++){
chks[i].checked=false;
}
};
btn2.onclick=function(){
for(var i=0;i<chks.length;i++){
// 进行反选
chks[i].checked=!chks[i].checked;
}
};

};
</script>

</head>
<body>
<div id="top">

</div>

<div id="container">
    <input type="button" value="全选" id="allSelect">
    <input type="button" value="反选" id="btn2">
    <input type="button" value="不选" id="noSelect">
    <hr size="5" color="white">
    <div id="chk">
        <input type="checkBox">篮球
        <br>
        <input type="checkBox">羽毛球
        <br>
        <input type="checkBox">乒乓球
        <br>
        <input type="checkBox">足球
        <br>
        <input type="checkBox">橄榄球
        <br>
        <input type="checkBox">棒球
    </div>
</div>

</body>
</html>

原文地址:http://blog.51cto.com/11871779/2069358

时间: 2024-10-12 11:09:06

利用js实现全选、反选、全不选(button)的相关文章

【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" /> <script type=&qu

表单javascript checkbox全选 反选 全不选

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>javascript checkbox全选 反选 全不选</title> <meta name="des

checkbook全选/反选/全不选

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><ul id="list"> <li><label><input type="checkbox"

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

表单全选反选全不选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>请输入关键词</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head><bod

复选框的 全选 反选 全不选

//全选 $("#btn1").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",true); }); //取消全选 $("#btn2").click(function(){ $("input[name='FORM_COLUMNS']").prop("checked",false); }); //反选 $(&

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu