<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>체크박스 제어</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/commons.css">
<link rel="stylesheet" type="text/css" href="./css/test.css">
<style>
</style>
<!-- javascript 작성 공간 -->
<script>
//속성명과 값이 같은 속성들은 자바스크립트에서 논리로 관리한다
//- (ex) checked, selected, required, disabled, readonly
function testCheck() {
var checkbox = document.querySelector("#test");
//var checkbox = document.getElementById("test");
//console.log(checkbox.checked);
var button = document.querySelector("#button");
// if(checkbox.checked) {//체크가 되었다면
// button.disabled = false;//버튼의 비활성화를 해제
// }
// else {
// button.disabled = true;//버튼의 비활성화를 설정
// }
button.disabled = !checkbox.checked;//버튼 비활성화를 체크 반대로 설정
}
</script>
</head>
<body>
<div class="container w-600">
<div class="row">
<h1>체크박스 제어</h1>
</div>
<div class="row left">
<!-- 라벨로 체크박스를 감싸면 ID가 없어도 타겟팅이 가능 -->
<label>
<input id="test" type="checkbox" oninput="testCheck();">
<!-- <input id="test" type="checkbox" onchange="testCheck();"> -->
체크박스
</label>
</div>
<div class="row">
<button id="button" disabled>버튼</button>
</div>
</div>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 예상 결제 금액 계산 (1) | 2023.09.25 |
|---|---|
| 이용약관 (0) | 2023.09.22 |
| 내장객체 연산방법 (0) | 2023.09.20 |
| 자바스크립트 내장 객체 (0) | 2023.09.18 |
| 게시글 작성 (0) | 2023.09.15 |