기록

*56일차 실습 본문

학원/실습

*56일차 실습

pringspring 2022. 4. 15. 17:29 

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>체크박스(체크박스를 라디오 버튼처럼 사용하기 / 전체선택 or 전체해제)</title>

	<style type="text/css">
	#underline {
		text-decoration: underline;
	}

	table {
		border: solid gray 1px;
		border-collapse: collapse;
	}

	td {
		border: solid gray 1px;
		border-collapse: collapse;
		padding: 5px;
	}

	td.title {
		background-color: ivory;
		text-align: right;
		font-weight: bold;
		color: #ff6600;
	}
	</style>

	<script type="text/javascript">
		function oneCheckbox(ckBox) { //체크박스가 하나만 선택되도록 하는 함수 oneCheckbox() 만들기
			//매개변수 ckBox는 체크박스를 받는 것이다.
			const ckBoxArr = document.getElementsByName("product");
			//alert(ckBoxArr.length); // 6
			for (let i = 0; i < ckBoxArr.length; i++) //for문을 돌면서 체크되지 않은 것을 모두 체크해제 한다.
				//javascript 짧은 조건문
				//a && b : a(조건식)가 참이면 b(실행문)를 실행
				//a || b : a(조건식)가 거짓이면 b(실행문)를 실행
				(ckBoxArr[i] != ckBox) && (ckBoxArr[i].checked = false);
		}
	</script>


</head>

<body>

	<div align="center">
		<h2>상품 선택(필수)</h2>
		<form>
			<table>
				<!-- 라디오처럼 동작하는 체크박스 -->
				<tr>
					<td class="title">종류</td>
					<td>
						<!-- this는 자기자신을 가리킨다. -->
						<input type="checkbox" name="product" id="product1" value="product1" onclick="oneCheckbox(this);" /><label for="product1">메인보드</label>&nbsp;
						<input type="checkbox" name="product" id="product2" value="product2" onclick="oneCheckbox(this);" /><label for="product2">모니터</label>&nbsp;
						<input type="checkbox" name="product" id="product3" value="product3" onclick="oneCheckbox(this);" /><label for="product3">프린터</label>&nbsp;
						<input type="checkbox" name="product" id="product4" value="product4" onclick="oneCheckbox(this);" /><label for="product4">하드디스크</label>&nbsp;
						<input type="checkbox" name="product" id="product5" value="product5" onclick="oneCheckbox(this);" /><label for="product5">메모리</label>&nbsp;
						<input type="checkbox" name="product" id="product6" value="product6" onclick="oneCheckbox(this);" /><label for="product6">CPU</label>&nbsp;
					</td>
				</tr>
			</table>
		</form>
	</div>

</body>

</html>

'학원 > 실습' 카테고리의 다른 글

*58일차 실습  (0) 2022.04.19
*57일차 실습  (0) 2022.04.18
*55일차 실습  (0) 2022.04.14
*54일차 실습  (0) 2022.04.13
*53일차 실습  (0) 2022.04.13
'학원/실습' Related Articles more