<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Checkbox 연동</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 체크박스 중 하나가 변경되었을 때 실행
$('#checkbox1, #checkbox2').change(function() {
var isChecked = $(this).prop('checked'); // 현재 클릭한 체크박스의 체크 상태
$('#checkbox1, #checkbox2').prop('checked', isChecked); // 두 체크박스의 상태를 동기화
var checkboxdata = $('#checkbox2').val();
alert(checkboxdata);
});
});
</script>
</head>
<body>
<h2>체크박스 동기화</h2>
<input type="checkbox" id="checkbox1" value="2"> 체크박스 1<br>
<div style ="display:none"><input type="checkbox" id="checkbox2" value="30"> 체크박스 2<br></div>
</body>
</html>체크 박스 관련 필요한 부분 정리
반응형
'Jquery' 카테고리의 다른 글
| [Javascript] 체크박스 (0) | 2024.09.13 |
|---|---|
| Jquery attribute vs props vs data 차이 (0) | 2019.05.03 |