                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /用JS實現購物車特效

如果要在所有的選項都被選中后，全選的選項自動被選上，該怎么實現？

<!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');

????????????//?計算已選項的總數

????????????function?showTotal(){
????????????????var?selected?=?0?;
????????????????for?(var?i?=?0?;?i<inputs.length;i++){
????????????????????if(inputs[i].checked){
????????????????????????selected?+=?1?;
????????????????????}
????????????????????total.innerHTML?=?'已選：'+?selected+?'項';

????????????????}
????????????}

????????????//?全選事件
????????????all.onchange?=?function?()?{
????????????????for?(var?i?=?0?;?i<inputs.length;i++){

????????????????????inputs[i].checked?=?all.checked;
????????????????????showTotal();
????????????????}
????????????};

????????????//?每個選項的事件
????????????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"/>選項1</label></li>
????<li><label><input?type="checkbox"/>選項2</label></li>
????<li><label><input?type="checkbox"/>選項3</label></li>
????<li><label><input?type="checkbox"/>選項4</label></li>
????<li><label><input?type="checkbox"/>選項5</label></li>
????<li><label><input?type="checkbox"/>選項6</label></li>
</ul>
<div?id="total">已選：0?項</div>
</body>
</html>

qq_煙火里的塵埃_0

2015-12-26

源自：用JS實現購物車特效 2-8

關注問題我要回答

3581

操作

收起

3 回答

李曉健回答被采納 +3 積分
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+?'項';
????}
????//如果選中項的個數等于所有項的個數就說明全部選中了
????if(selected?==?inputs.length){
????????all.checked?=?true;
????}else{
????????all.checked?=?false;
????}
}

這個方法里加一個判斷就行了

3 回復有任何疑惑可以回復我~

收起回答

qq_煙火里的塵埃_0 提問者

非常感謝！

2015-12-28 回復有任何疑惑可以回復我~

夢想成真213 回復 qq_煙火里的塵埃_0 提問者

你的all.onchange這個事件中，showTotal()要放到for循環外面

2016-01-11 回復有任何疑惑可以回復我~

慕粉2135579427
2017-04-20

在showTotal函數最后加上return function(){return selected}

0 回復有任何疑惑可以回復我~

收起回答

狂飆的蝸牛_1
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?;
?
????????????//?計算已選項的總數
?
????????????function?showTotal(){
???????????????
????????????????for?(var?i?=?0?;?i<inputs.length;i++){
????????????????????if(inputs[i].checked){
????????????????????????selected?+=?1?;
????????????????????}
????????????????????total.innerHTML?=?'已選：'+?selected+?'項';
?
????????????????}
????????????}
?
????????????//?全選事件
????????????all.onchange?=?function?()?{
????????????????for?(var?i?=?0?;?i<inputs.length;i++){
?
????????????????????inputs[i].checked?=?all.checked;
????????????????????showTotal();
????????????????}
????????????};
?
????????????//?每個選項的事件
????????????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"/>選項1</label></li>
????<li><label><input?type="checkbox"/>選項2</label></li>
????<li><label><input?type="checkbox"/>選項3</label></li>
????<li><label><input?type="checkbox"/>選項4</label></li>
????<li><label><input?type="checkbox"/>選項5</label></li>
????<li><label><input?type="checkbox"/>選項6</label></li>
</ul>
<div?id="total">已選：0?項</div>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

狂飆的蝸牛_1

在全選事件里面也要對selected歸零，上面的代碼里沒寫

2015-12-26 回復有任何疑惑可以回復我~