<!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>
</head>
<body>
<dl>
<dt>
<input type="checkbox" id="checkAll" />
<label>全選</label>
<a href="javascript:;">反選</a>
<p style="color: red">顯示選中</p>
</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>
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//全選效果
var check=$('dt input');
var check_list=$('dd input');
check.click(function()
{
/* checkbox 判斷是否選中方法
var check=$(this).is(":checked");var check=$(this).get(0).checked;var check=$(this).attr('checked');在jQuery1.6版本之后，取復選框有沒有被選中，要用prop*/
var box=check.prop('checked');
if(box==true)
{
$('dt label').text('全不選');
check_list.prop('checked',true);
}
else
{
$('dt label').text('全選');
check_list.prop('checked',false);
}
});
//全選按鈕選中狀態判斷
function checks()
{
//根據checkbox總數與選中的checkbox比較，判斷全選按鈕狀態
var checkall=check_list.length;//總數
var num=0;
check_list.each(function()
{//當前選中
var boxs=$(this).prop('checked');
if(boxs==true)
{
num++;
}
});
(checkall==num)?check.prop('checked',true):check.prop('checked',false);
}
//反選hover效果；
$('a').hover(function()
{
$('a').css('color','red');
},function()
{
$('a').css('color','#09f');
});
//反選效果
$('a').click(function()
{
check_list.each(function()
{
var now=$(this).prop('checked');//獲取當前的checkbox狀態；
$(this).prop('checked',!now);//賦予當前相反的狀態
});
checks();
});
//check_list 下的checkbox發生點擊事件
check_list.click(function()
{
checks();
});
//顯示選中
$('dt p').click(function()
{
var arr=new Array();
check_list.each(function(i)
{
var boxs=$(this).prop('checked');
if(boxs==true)
{
arr[i]=$(this).next().text();
}
});
console.log(arr);
if(arr!='')
{
var str=arr.join(',');
}
else
{
str='你沒有選中任何一個';
}
alert(str);
});
});
</script>
</body>
</html>
如果有錯誤地方或者更簡單方法，請大家指出來。不勝感激。