求一个使用javaScript实现全选和反选的例子

lieyanfeng 2012-12-13 12:01:35

最近想练一练javaScript，所以求一个实现了全选和反选的例子。
会的发下。

...全文

247 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

Neil_223 2012-12-13

打赏
举报

获得复选框数组，遍历数组： 1、全选，可以直接置复选框为选择状态； 2、反选，判断每一个下标下的复选框的选择状态，然后置为相反：

wwxflying 2012-12-13

打赏
举报

这个很简单的，自己学习写了，这是最基础的，一定要学会

失落夏天 2012-12-13

打赏
举报


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title></title>
   <script type="text/javascript">
      window.onload = function() {
         var all = document.getElementById("all");
         //注意: all.onchange=selectAll()
         //表示调用方法并将其返回值赋值
         all.onchange = selectAll;
         document.getElementById("reverse")
            .onchange = function() {
            var inps = 
               document.getElementsByTagName("input");
         for(var i=0;i<inps.length;i++) {
            var type = inps[i].getAttribute("type");
            if("checkbox" == type) {
               if("all" != 
                     inps[i].getAttribute("id") ) {
                  inps[i].checked = !inps[i].checked;
               }
            }
         }
         };
      }

      function selectAll() {
         var flag = this.checked;
         var inps = 
            document.getElementsByTagName("input");
         for(var i=0;i<inps.length;i++) {
            var type = inps[i].getAttribute("type");
            if("checkbox" == type) {
               if(inps[i].getAttribute("id") == 
                     "reverse" ) {
                  inps[i] = false;
               }else {
                  inps[i].checked = flag;
               }
            }
         }
      }
   </script>
</head>
<body>
   <h1>您喜欢的计算机品牌</h1>
   苹果 <input name="" type="checkbox"><br>
   索尼 <input name="" type="checkbox"><br>
   三星 <input name="" type="checkbox"><br>
   华硕 <input name="" type="checkbox"><br>
   宏碁 <input name="" type="checkbox"><br>
   全选 <input id="all" name="" type="checkbox">
   反选 <input id="reverse" name="" type="checkbox">
</body>
</html>

java_freshman01 2012-12-13

打赏
举报

引用 11 楼 benpao412 的回复:

学习了！。。。

我注意你好久了。

jackson_fighting 2012-12-13

打赏
举报


// 全选 反选
/**
*topId 点击全选或者反选的元素Id
subName 复选框的name属性
**/
function selectAll(topId,subName){
	var check=document.getElementById(topId);
    var se = document.getElementsByName(subName);    
    for(var i=0;i<se.length;i++){
    	if(check.checked){
    		se[i].checked=true;
    	}else{
    		se[i].checked=false;
    	}
    }
}

半夜郎中 2012-12-13

打赏
举报

currentObj.get(0)=checked=true;写错了 currentObj.get(0).checked=true;

半夜郎中 2012-12-13

打赏
举报

给楼主一个简单的基于jquery的代码吧 var checkAllORNOT=function(){ var checkboxes = $("input@[type='checkbox']"); checkboxes.each(function(){ var currentObj = $(this); if(currentObj.get(0).checked){ currentObj.get(0)=checked=false; }else{ currentObj.get(0)=checked=true; } }); }

最初最后 2012-12-13

打赏
举报

<!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=utf-8" />
<title>复选框（checkbox）全选/全不选/返选</title>
<style>
body,dl,dt,dd,p{margin:0;padding:0;}
body{font-family:Tahoma;font-size:12px;}
label,input,a{vertical-align:middle;}
label{padding:0 10px 0 5px;}
a{color:#09f;text-decoration:none;}
a:hover{color:red;}
dl{width:120px;margin:10px auto;padding:10px 5px;border:1px solid #666;border-radius:5px;background:#fafafa;}
dt{padding-bottom:10px;border-bottom:1px solid #666;}
dt label{font-weight:700;}
p{margin-top:10px;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oA = document.getElementsByTagName("a")[0];
var oInput = document.getElementsByTagName("input");
var oLabel = document.getElementsByTagName("label")[0];
var isCheckAll = function ()
{
for (var i = 1, n = 0; i < oInput.length; i++)
{
oInput[i].checked && n++
}
oInput[0].checked = n == oInput.length - 1;
oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选"
};
//全选/全不选
oInput[0].onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = this.checked
}
isCheckAll()
};
//反选
oA.onclick = function ()
{
for (var i = 1; i < oInput.length; i++)
{
oInput[i].checked = !oInput[i].checked
}
isCheckAll()
};
//根据复选个数更新全选框状态
for (var i = 1; i < oInput.length; i++)
{
oInput[i].onclick = function ()
{
isCheckAll()
}
}
}
</script>
</head>
<body>
<dl>
<dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt>
<dd>
<p><input type="checkbox" name="item" /><label>选项（一）</label></p>
<p><input type="checkbox" name="item" /><label>选项（二）</label></p>
<p><input type="checkbox" name="item" /><label>选项（三）</label></p>
<p><input type="checkbox" name="item" /><label>选项（四）</label></p>
<p><input type="checkbox" name="item" /><label>选项（五）</label></p>
<p><input type="checkbox" name="item" /><label>选项（六）</label></p>
<p><input type="checkbox" name="item" /><label>选项（七）</label></p>
<p><input type="checkbox" name="item" /><label>选项（八）</label></p>
<p><input type="checkbox" name="item" /><label>选项（九）</label></p>
<p><input type="checkbox" name="item" /><label>选项（十）</label></p>
</dd>
</dl>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
</body>
</html>

半疯半野半温柔 2012-12-13

打赏
举报

<HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript"> function unselectall(){ if(document.myform.chkAll.checked){ document.myform.chkAll.checked = document.myform.chkAll.checked&0; } } function CheckAll(form){ for (var i=0;i<form.elements.length;i++){ var e = form.elements[i]; if (e.Name != 'chkAll'&&e.disabled==false) e.checked = form.chkAll.checked; } } </script> </HEAD> <BODY> <form name="myform" method="post" id="myform" action="" > <input name='id' type='checkbox' onclick='unselectall()' id='id' value='1'> 设计家园 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='2'> 网页教程 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='3'> 酷站欣赏 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='4'> 网页素材 <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'> 全选 </form> </BODY> </HTML> 刚在网上看到个，觉得还不错，分享下。。。