<!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?aInput?=?document.getElementsByTagName("input");
????????var?oLabel?=?document.getElementsByTagName("label")[0];
????????var?isCheckAll?=?function()?{
????????????for?(var?i?=?1,?n?=?0;?i?<?aInput.length;?i++)?{
????????????????aInput[i].checked?&&?n++;
????????????}
????????????aInput[0].checked?=?n?==?aInput.length?-?1;
????????????oLabel.innerHTML?=?aInput[0].checked???"全不選"?:?"全選"
????????};
????????//全選/全不選
????????aInput[0].onclick?=?function()?{
????????????for?(var?i?=?1;?i?<?aInput.length;?i++)?{
????????????????aInput[i].checked?=?this.checked
????????????}
????????????isCheckAll()
????????};
????????//反選
????????oA.onclick?=?function()?{
????????????for?(var?i?=?1;?i?<?aInput.length;?i++)?{
????????????????aInput[i].checked?=?!aInput[i].checked
????????????}
????????????isCheckAll()
????????};
????????//根據復選個數更新全選框狀態
????????for?(var?i?=?1;?i?<?aInput.length;?i++)?{
????????????aInput[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>新手表示不明白isCheckAll那個函數和更新全選框狀態是用來干嘛的，不用的話好像也有效果，請大神指教。
js 全選反選問題
慕九州7009252
2016-12-29 10:06:24
