<!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 proc1(){
//사용 가능과 불가능을 구분 한다
//띄어쓰기 하면 폼 안에 있는 모든 후손들
jQuery('form *:enabled').css('border', '4px dotted green')
jQuery('form *:disabled').css('border', '3px solid red')
}
$(function(){
//$('#result2 input[type=button]').on('click', function(){})//속성선택
$('#result2 :button').on('click', function(){//폼양식선택
/*
$('input[type=checkbox]').each(function(){ })
$(':checkbox').each(function(i){ })
$.each($('input[type=checkbox]'), function(){ })
*/
str = "당신의 취미는 <br>";
$.each($(':checkbox:checked'), function(){
str += $(this).val() + " "
})
$('#result2 div').html(str);
})
})
</script>
</head>
<body>
<div class = "box">
상태필터 <br>
enabled : 사용가능 <br>
disabled : 사용불가능 <br>
selected : select option <br>
checked : checked, radio <br>
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1">
<form>
<input type="text" name="id"><br>
<input type="password" name="pass"><br>
<select name="disSelect">
<option>Option1</option>
<option>Option2</option>
<option selected="selected">Option3</option>
<option>Option4</option>
</select>
<br>
<textarea name="enTextarea" rows=10 cols=20 >text</textarea><br>
<input type="button" value="확인" onclick="alert('Hello~~')" disabled="disabled"> <br>
</form>
</div>
</div>
<div class = "box">
상태필터 <br>
전송버튼 클릭시 체크된 항목의 값을 script에서 처리한다 - value - val()<br>
innerHTML - html()<br>
textContent - text()<br>
value - val()<br>
<br>
<div id = "result2">
<form>
취 미 :
<input type="checkbox" name="hobby" value="여행" checked >여행
<input type="checkbox" name="hobby" value="장기">장기
<input type="checkbox" name="hobby" value="바둑">바둑
<input type="checkbox" name="hobby" value="독서">독서
<input type="checkbox" name="hobby" value="낚시">낚시<br><br>
<input type="button" value="전송">
</form>
<div></div>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!