求一个全选或者反选的javaScript的例子。
求一个全选或者反选的javaScript的例子。
想学习一些关于这个的例子，今天尝试做一个这样的例子，没做出来。。
有木有人帮帮忙。
[解决办法]
<!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 type="text/javascript">
function quanxuan(){
var checkboxs = document.getElementsByName("checkbox");
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=true;
}
}
function fanxuan()(){
var checkboxs = document.getElementsByName("checkbox");
for(var i=0;i<checkboxs.length;i++){
checkboxs[i].checked=false;
}
}
</script>
<body>
<div id="checkboxTest">
<input type="checkbox" name="checkbox" value="checkbox" />
<input type="checkbox" name="checkbox" value="checkbox" />
<input type="checkbox" name="checkbox" value="checkbox" />
<input type="checkbox" name="checkbox" value="checkbox" />
</div>
<div>
<input name="quanxuan" type="button" onclick="quanxuan()" value="全选"/>
<input name="fanxuan" type="button" onclick="fanxuan()" value="反选"/>
</div>
</body>
</html>
<html>
<body>
<table cellspacing="0" class="tablesorter" id="lookupTypeTable"
style="width:100%">
<thead>
<tr>
<th width="25px">
<input type="checkbox" onclick="selectAll(this)" id="checkall"></input>
</th>
<th>
序号
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="cName" onclick="selectOne()"
value="1"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="cName" onclick="selectOne()"
value="2"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="cName" onclick="selectOne()"
value="3"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="cName" onclick="selectOne()"
value="4"/></td>
<td>4</td>
</tr>
</tbody>
</table>
</body>
<script>
function selectAll(obj)
{
var boxlist=document.getElementsByName("cName");
if(obj.checked)
{
for(var i=0;i<boxlist.length;i++)
{
boxlist[i].checked="true";
}
}
else
{
for(var i=0;i<boxlist.length;i++)
{
boxlist[i].checked="";
}
}
}
function selectOne(){
var checkall=document.getElementById("checkall");
if(checkall.checked){
checkall.checked="";
}
}
</script>
</html>
<!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">
function allSelect() {
var flag = document.getElementById("all").checked;
var cbs = document.getElementsByTagName("input");
for(var i=0;i<cbs.length;i++) {
cbs[i].checked=flag;
if(cbs[i].getAttribute("id") == "reverse") {
cbs[i].checked = false;
}
}
}
function reverseSelect() {
var cbs = document.getElementsByTagName("input");
for(var i=0;i<cbs.length;i++) {
cbs[i].checked = !cbs[i].checked;
if(cbs[i].getAttribute("id")=="all") {
cbs[i].checked = false;
}
}
}
</script>
</head>
<body>
<h1>您喜欢的计算机品牌</h1>
<input id="" name="" type="checkbox">苹果<br>
<input id="" name="" type="checkbox">索尼<br>
<input id="" name="" type="checkbox">三星<br>
<input id="" name="" type="checkbox">华硕<br>
<input id="" name="" type="checkbox">宏碁<br>
<input id="all" name="" type="checkbox"
onchange="allSelect();">全选
<input id="reverse" name="" type="checkbox"
onchange="reverseSelect();">反选
</body>
</html>
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>
[解决办法]
借用上面的页面元素jquery实现
//全选
$("input[type=checkbox]").each(function(i,checkBox){
$(checkBox).attr("checked",true);
});
//反选
$("input[type=checkbox]").each(function(i,checkBox){
var checked=$(checkBox).attr("checked");
$(checkBox).attr("checked",!checked);//checked属性值取反,自然就会把true的改为false，false的变为true
});
