<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title></title>
????<style?type="text/css">
????????*{
????????????margin:?0;
????????????padding:?0;
????????????list-style:?none;
????????}
????????body?{
????????????padding:?20px;
????????}
????????li?{
????????????float:?left;
????????????margin:?20px;
????????}
????????#total?{
????????????clear:?both;
????????}
????</style>
????<script?type="text/javascript">
????????window.onload?=?function?()?{
????????????//?獲取元素
????????????var?all?=?document.getElementById('all');
????????????var?list?=?document.getElementById('list');
????????????var?inputs?=?list.getElementsByTagName('input');
????????????var?total?=?document.getElementById('total');
????????????//?計(jì)算已選項(xiàng)的總數(shù)
????????????function?showTotal(){
????????????????var?selected?=?0?;
????????????????for?(var?i?=?0?;?i<inputs.length;i++){
????????????????????if(inputs[i].checked){
????????????????????????selected?+=?1?;
????????????????????}
????????????????????total.innerHTML?=?'已選：'+?selected+?'項(xiàng)';
????????????????}
????????????}
????????????//?全選事件
????????????all.onchange?=?function?()?{
????????????????for?(var?i?=?0?;?i<inputs.length;i++){
????????????????????inputs[i].checked?=?all.checked;
????????????????????showTotal();
????????????????}
????????????};
????????????//?每個(gè)選項(xiàng)的事件
????????????for?(var?i?=?0;?i<inputs.length;?i++)?{
????????????????inputs[i].onchange?=?function?()?{
????????????????????showTotal();
????????????????????if?(!this.checked)?{
????????????????????????all.checked?=?false;
????????????????????}
????????????????????
????????????????};
????????????}
????????????
????????}
????</script>
</head>
<body>
<div><label><input?id="all"?type="checkbox"/>全選</label></div>
<ul?id="list">
????<li><label><input?type="checkbox"/>選項(xiàng)1</label></li>
????<li><label><input?type="checkbox"/>選項(xiàng)2</label></li>
????<li><label><input?type="checkbox"/>選項(xiàng)3</label></li>
????<li><label><input?type="checkbox"/>選項(xiàng)4</label></li>
????<li><label><input?type="checkbox"/>選項(xiàng)5</label></li>
????<li><label><input?type="checkbox"/>選項(xiàng)6</label></li>
</ul>
<div?id="total">已選：0?項(xiàng)</div>
</body>
</html>
2015-12-26
function?showTotal(){ ????var?selected?=?0?; ????for?(var?i?=?0?;?i<inputs.length;i++){ ????????if(inputs[i].checked){ ????????????selected?+=?1?; ????????} ????????total.innerHTML?=?'已選：'+?selected+?'項(xiàng)'; ????} ????//如果選中項(xiàng)的個(gè)數(shù)等于所有項(xiàng)的個(gè)數(shù)就說(shuō)明全部選中了 ????if(selected?==?inputs.length){ ????????all.checked?=?true; ????}else{ ????????all.checked?=?false; ????} }這個(gè)方法里加一個(gè)判斷就行了
2017-04-20
在showTotal函數(shù)最后加上return function(){return selected}
2015-12-26
<!DOCTYPE?html> <html> <head> ????<meta?charset="UTF-8"> ????<title></title> ????<style?type="text/css"> ????????*{ ????????????margin:?0; ????????????padding:?0; ????????????list-style:?none; ????????} ????????body?{ ????????????padding:?20px; ????????} ? ????????li?{ ????????????float:?left; ????????????margin:?20px; ????????} ????????#total?{ ????????????clear:?both; ????????} ????</style> ????<script?type="text/javascript"> ????????window.onload?=?function?()?{ ? ????????????//?獲取元素 ????????????var?all?=?document.getElementById('all'); ????????????var?list?=?document.getElementById('list'); ????????????var?inputs?=?list.getElementsByTagName('input'); ????????????var?total?=?document.getElementById('total'); var?selected?=?0?; ? ????????????//?計(jì)算已選項(xiàng)的總數(shù) ? ????????????function?showTotal(){ ??????????????? ????????????????for?(var?i?=?0?;?i<inputs.length;i++){ ????????????????????if(inputs[i].checked){ ????????????????????????selected?+=?1?; ????????????????????} ????????????????????total.innerHTML?=?'已選：'+?selected+?'項(xiàng)'; ? ????????????????} ????????????} ? ????????????//?全選事件 ????????????all.onchange?=?function?()?{ ????????????????for?(var?i?=?0?;?i<inputs.length;i++){ ? ????????????????????inputs[i].checked?=?all.checked; ????????????????????showTotal(); ????????????????} ????????????}; ? ????????????//?每個(gè)選項(xiàng)的事件 ????????????for?(var?i?=?0;?i<inputs.length;?i++)?{ ????????????????inputs[i].onchange?=?function?()?{ selected=0;//歸零 ????????????????????showTotal(); console.log(selected); if(selected>=6){ all.checked?=?true; }else{ all.checked?=?false;//必須 } ????????????????????? ????????????????} ????????????} } ????</script> </head> <body> <div><label><input?id="all"?type="checkbox"/>全選</label></div> <ul?id="list"> ????<li><label><input?type="checkbox"/>選項(xiàng)1</label></li> ????<li><label><input?type="checkbox"/>選項(xiàng)2</label></li> ????<li><label><input?type="checkbox"/>選項(xiàng)3</label></li> ????<li><label><input?type="checkbox"/>選項(xiàng)4</label></li> ????<li><label><input?type="checkbox"/>選項(xiàng)5</label></li> ????<li><label><input?type="checkbox"/>選項(xiàng)6</label></li> </ul> <div?id="total">已選：0?項(xiàng)</div> </body> </html>