嘿牛软件工程师_成都传智博客_JavaScript中的复选框的全选、反选有关问题
日期：2014-05-16 浏览次数：20378 次
---------------------- android培训、java培训、期待与您交流！ ----------------------
本节探讨JavaScript中的复选框问题
复选框一般涉及到全选、全不选、反选等问题（全选和全不选可以看作一个复选框的两种实现）。当调用javascript时，可以通过传入name属性以及id属性。用到的方法是document.getElementByName（"name值"）、document.getElementByTd（"id值"）只是二者在应用的时候，name属性只能以数组的形式调用,而id属性可以直接调用。如下面程序中的allCk[0].checked
和allCk.checked，分别来获取复选框的赋值情况。
下面是填写一个你喜欢的运动的复选框。
<!--程序实现如下：-->
<!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>
<title>第二题</title>
<!--插入嵌入式样式表 -->
<style type="text/css" media=screen,projection>
<!--
p {font-size: 18px;color:Blue;font-family:宋体;list-style-type:circle;text-decoration:underline}
-->
</style>
<script language="javascript">
<!-- 如果函数传递时要以Id地址传入，那么可以直接获得值：allCk.checked ;如果 函数传递时要以Name地址传入,那么要通过数组的形式获得值：allCk
[0].checked-->
function checkEvent(name, allCheckId)
{
var allCk = document.getElementById(allCheckId);
//var allCk = document.getElementByName(allCheckId);
// if (allCk[0].checked == true)
if (allCk.checked == true)
checkAll(name);
else
checkAllNo(name);
}
//全选
function checkAll(name)
{
var names=document.getElementsByName(name);
var len=names.length;
if(len>0)
{
var i=0;
for(i=0;i<len;i++)
names[i].checked=true;
}
}
//全不选
function checkAllNo(name)
{
var names=document.getElementsByName(name);
var len=names.length;
if(len>0)
{
var i=0;
for(i=0;i<len;i++)
names[i].checked=false;
}
}
//反选
function reserveCheck(name)
{
var names = document.getElementsByName(name);
var len = names.length;
if (len > 0)
{
var i = 0;
for (i = 0; i < len; i++)
{
if (names[i].checked)
names[i].checked = false;
else
names[i].checked = true;
}
}
}
</script>
</head>
<body>
<p>选择你喜欢的运动</p>
<form>
<ul>
<li><input type="checkbox" name="ck" value="1" >篮球<br></li>
<li><input type="checkbox"
