<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#btn1').on('click', function(){
//각 요소의 상태값을 가져오기
chk = $('#checkTest').prop('checked');
sel = $('#selTest option').eq(2).prop('selected');
read = $('#txtTest').prop('readonly');
btn = $('#runBtn').prop('disabled');
console.log(chk, sel, read, btn);
$('#checkTest').prop('checked', !chk )
$('#selTest option').eq(2).prop('selected', !sel)
$('#txtTest').prop('readonly', !read)
$('#runBtn').prop('disabled', !btn)
})
$('#all').on('change', function(){
//전체선택의 checkede속성의 상태값을 가져온다
allcheck = $(this).prop('checked');
//1~5의 상태값을 변경한다
$('.check').prop('checked', allcheck);
})
})
</script>
</head>
<body>
<div class = "box">
prop()<br>
요소들의 상태값을 가져오거나 설정한다<br>
checked, disabled, readonly, selected, multiple<br>
$(this).prop('checked') - get -true / false를 리턴 한다<br>
$(this).prop('checked', true) - set<br>
<br>
<button id="btn1" type = "button">확인</button>
<div id = "result1">
<form>
체크박스(라디오버튼) :
<input type="checkbox" id="checkTest" checked="checked"><br><br>
리스트박스(select객체) :
<select id="selTest">
<option value="1">하나</option>
<option value="2">둘</option>
<option value="3" selected >셋</option>
<option value="4">넷</option>
</select><br><br>
text객체 (readonly) :
<input type="text" value="가나다" id="txtTest"><br><br>
button객체(disabled) :
<input type="button" value="실행" id="runBtn" onclick="alert('Hello~')">
</form>
</div>
</div>
<div class = "box">
<br>
<div id = "result2">
<input type = "checkbox" id="all">전체선택
<br>
<input type = "checkbox" class="check">1
<input type = "checkbox" class="check">2
<input type = "checkbox" class="check">3
<input type = "checkbox" class="check">4
<input type = "checkbox" class="check">5
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!