기본사용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 사용하기:version 9d에서 새롭게 추가</title>
<style type="text/css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//체크하기 버튼을 클릭하면
$('#checkBtn').on('click', function() {
$('#mailing').prop('checked', true);
})
//체크해제하기 버튼을 클릭하면
$('#checkBtn2').on('click', function() {
$('#mailing').prop('checked', false);
})
});
</script>
</head>
<body>
메일확인::<input type="checkbox" id="mailing">
<input type="button" value="체크하기" id="checkBtn">
<input type="button" value="체크해제" id="checkBtn2">
</body>
</html>응용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수 사용하기:version 9d에서 새롭게 추가</title>
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. allCheck을 클릭하면 모든 메뉴 부분이 동시에 체크가 되도록 작성....
/* $(':checkbox[name="allCheck"]').change(function(){
if($(this).prop('checked', true)){
$('input[name="menu"]').prop('checked', true);
}
}) */
//2.
//내가 짠 코드
/*$(':checkbox[name="allCheck"]').click(function(){
if($(this).is(':checked')){
$('input[name="menu"]').prop('checked', true);
}else{
$('input[name="menu"]').prop('checked', false);
}
}) */
//선생님 코드
$(':checkbox[name="allCheck"]').change(function(){
var allCheck=$(this).prop('checked');
$('input[name="menu"]').prop('checked', allCheck);
});
});
</script>
</head>
<body>
<h3>메뉴 선택하기</h3>
<table border='2' bgcolor='yellow' width='400'>
<tr>
<td><input type="checkbox" name="allCheck"></td>
<td>전체선택</td>
</tr>
<tr>
<td><input type="checkbox" name="menu"></td>
<td>짜장면</td>
</tr>
<tr>
<td><input type="checkbox" name="menu"></td>
<td>짬뽕</td>
</tr>
<tr>
<td><input type="checkbox" name="menu"></td>
<td>탕슉</td>
</tr>
<tr>
<td><input type="checkbox" name="menu"></td>
<td>양장피</td>
</tr>
</table>
</body>
</html>'컴퓨터 프로그래밍 > JQuery' 카테고리의 다른 글
| animate()-이미지, div태그, slideToggle() (0) | 2020.05.29 |
|---|---|
| form fields-select, input, submit (0) | 2020.05.29 |
| submit() (0) | 2020.05.28 |
| confirm() (0) | 2020.05.28 |
| each() (0) | 2020.05.28 |