实践 - 选项收集

本文导航

  1. 本次实践的主要训练知识点

  • 作者：KK

  • 发表日期：2016.2.25

本次实践的主要训练知识点

  • 通过js操作数组来填写HTML代码,实现生成数据选项

  • 利用checkbox的value属性作为下标去取数组数据

  • for循环加深训练

  • 数组join方法将元素连接成字符串的实践

其实就像选菜一样,要把选中的菜都拿去结算支付,代码

<html>
</head>
<meta charset="UTF-8">
<title>收集选项</title>
<script>
window.addEventListener('load', function(){
	document.getElementById('cooking').onclick = function(){
		var vegetableCheckboxList = document.getElementsByClassName('cuisine');
		var cookingList = [];
		for(var i = 0; i < vegetableCheckboxList.length; i++){
			var vegetable = vegetableCheckboxList[i];
			if(vegetable.checked){
				var vegetableName = vegetableList[vegetable.value];
				cookingList.push(vegetableName); //用这个下标
			}
		}
		
		if(!cookingList.length){
			alert('没有要煮的菜呀');
			return;
		}
		var resultHtml = '要煮的菜分别是:<span>' + cookingList.join('、') + '</span>';
		document.getElementById('result').innerHTML = resultHtml;
	}
});

var vegetableList = ['白菜', '红菜', '黑菜', '黄菜', '蓝菜'];
</script>
<style>label{cursor:pointer;} span{color:red;}</style>
</head>
<body>
	<ul>
		<script type="text/javascript">
		//通过for循环输出5个菜式
		for(var i = 0; i < vegetableList.length; i++){
			var id = 'vegetable' + i;
			//用document.write方法可以在当前位置写入一段HTML代码
			//如果一个字符串在一行里面不以'号终结的话,那么行尾必须有一个\号,然后下一行继续写这个字符串
			var optionHtml = '<li>\
				<input type="checkbox" class="cuisine" id="' + id + '" value="' + i + '"/>\
				<label for="' + id + '">' + vegetableList[i] + '</label>\
			</li>';
			document.write(optionHtml);
		}
		//当写完HTML麻烦你用开发者工具查询一下这些checkbox的ID属性,看看它们怎么出来的
		</script>
	</ul>
	<button type="button" id="cooking">煮</button><br/><br/>
	<div id="result"></div>
</body>
</html>

效果如下: