[JavaScript] 13. checkbox & select

쟌쥰 2020. 1. 26. 19:14

checkbox

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#colorbox {
	width: 320px;
	height: 320px;
	position: relative;
}

#red, #green, #blue, #black {
	width: 150px;
	height: 150px;
	border: 1px solid black;
	position: absolute;
}

#green {
	left: 160px;
}

#blue {
	top: 160px;
}

#black {
	left: 160px;
	top: 160px;
}
</style>

<script type="text/javascript">
	function selectColor() {
		var chks = document.getElementsByName("chk");
		for (var i = 0; i < chks.length; i++) {
			if (chks[i].checked) {
				document.getElementById(chks[i].value).style.backgroundColor = chks[i].value;
			} else {
				document.getElementById(chks[i].value).style.backgroundColor = "";
			}
		}
	}

	function allCheck(check) {
		var chks = document.getElementsByName("chk");
		for (var i = 0; i < chks.length; i++) {
			chks[i].checked = check;

		}
	}

	/* 	function clearColor() {
	 var all = document.getElementsByName("all");
	 var chks = document.getElementsByName("chk");

	 all[0].checked = false;

	 for (var i = 0; i < chks.length; i++) {
	 chks[i].checked = false;
	 document.getElementById(chks[i].value).style.backgroundColor = "white";
	 }
	 } */

	function clearColor() {
		var colorbox = document.querySelectorAll("#colorbox > div");
		for (var i = 0; i < colorbox.length; i++) {
			colorbox[i].style.backgroundColor = "";
		}
		allCheck(false);
		document.getElementsByName("all")[0].checked = false;

	}
</script>

</head>
<body>
	<div id="colorbox">
		<div id="red">RED</div>
		<div id="green">GREEN</div>
		<div id="blue">BLUE</div>
		<div id="black">BLACK</div>
	</div>

	<div id="base">
		<form>
			<input type="checkbox" name="all" onclick="allCheck(this.checked);">전체선택<br>
			<input type="checkbox" name="chk" value="red">RED<br> 
			<input type="checkbox" name="chk" value="green">GREEN<br> 
			<input type="checkbox" name="chk" value="blue">BLUE<br> 
			<input type="checkbox" name="chk" value="black">BLACK<br> 
			<input type="button" value="select" onclick="selectColor();"> 
			<input type="button" value="clear" onclick="clearColor();">
		</form>
	</div>

</body>
</html>

select

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function show01() {
		var food = document.getElementsByName("food")[0];
		var idx = food.selectedIndex; //선택되어있는 option의 인덱스 반환
		var val = food.options[idx].value; //select가 가진 option 태그들
		alert(val + "먹고싶다...");

	}

	function show02() {
		var food = document.getElementsByName("food")[1];
		var str = "";
		for (var i = 0; i < food.options.length; i++) {
			if(food.options[i].selected){
				str += food.options[i].value + " ";
			}
		}
		alert(str + "먹고싶다 ...");
	}
</script>

</head>
<body>

	<h1>음식 선택하기</h1>

	<form>
		<select name="food" onchange="show01();">
			<optgroup label="--선택--"></optgroup>
			<option value="라면">라면</option>
			<option value="김밥">김밥</option>
			<option value="만두">만두</option>
			<option value="불고기">불고기</option>
			<option value="치킨">치킨</option>
		</select> <br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br>
		<br> 
		<select name="food">
			<optgroup label="--선택--"></optgroup>
			<option value="라면">라면</option>
			<option value="김밥">김밥</option>
			<option value="만두">만두</option>
			<option value="불고기">불고기</option>
			<option value="치킨">치킨</option>
		</select> <input type="button" value="선택" onclick="show02();">
	</form>

</body>
</html>