티스토리 뷰

UI_UX/JavaScript & JQuery

[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>

'UI_UX > JavaScript & JQuery' 카테고리의 다른 글

[JavaScript] 12. 팝업창, 윈도우, location  (0) 2020.01.26
[JavaScript] 11. JavaScript 배열  (0) 2020.01.26
[JavaScript] 10. String 객체 사용  (0) 2020.01.26
[JavaScript] 9. Math 객체 사용  (0) 2020.01.26
[JavaScript] 8. Date 객체 사용  (0) 2020.01.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함