728x90
반응형
<script>
$(function(){
//체크박스의 체크 여부를 확인
//.prop() - 태그 상태를 가져오는 명령
//.attr() - 태그에 작성(표시)된 글자를 가져오는 명령(String)
console.log($(".agree").prop("checked"));//.agree의 checked 상태가 어때요?
console.log($(".agree").attr("checked"));//.agree의 checked 속성의 글자값이 뭐에요?
console.log($(".sample-image").prop("width"));//.sample-image의 width 상태가 어때요?
console.log($(".sample-image").attr("width"));//.sample-image의 width 속성의 글자값이 뭐에요?
console.log($(".agree").prop("disabled"));//.agree의 disabled 상태가 어때요?
console.log($(".agree").attr("disabled"));//.agree의 disabled 속성의 글자값이 뭐에요?
console.log($(".price").prop("data-price"));//.price의 data-price 상태가 어때요?
console.log($(".price").attr("data-price"));//.price의 data-price 속성의 글자값이 뭐에요?
});
</script>
</head>
<body>
<input type="checkbox" class="agree" checked="checked">
<span>동의합니다</span>
<hr>
<img src="image/kakao.gif" width="200" height="200" class="sample-image">
<hr>
<span class="price" data-price="700"></span>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전체 선택</title>
<style>
label {
display: block;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(function(){
$(".check-all").on("input", function(){
//주인공 : 선택된 .check-all
//주인공의 상태 : this.checked 또는 $(this).prop("checked")
var isChecked = $(this).prop("checked");
//$("input[type=checkbox]:not(.check-all)").prop("checked", isChecked);
//$(".check-all").prop("checked", isChecked);
$("input[type=checkbox]").prop("checked", isChecked);
});
});
</script>
</head>
<body>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<hr>
<label><input type="checkbox" oninput="check2();"><span>딸기</span></label>
<label><input type="checkbox" oninput="check2();"><span>포도</span></label>
<label><input type="checkbox" oninput="check2();"><span>람부탄</span></label>
<label><input type="checkbox" oninput="check2();"><span>홍시</span></label>
<label><input type="checkbox" oninput="check2();"><span>두리안</span></label>
<label><input type="checkbox" oninput="check2();"><span>오렌지</span></label>
<label><input type="checkbox" oninput="check2();"><span>망고</span></label>
<label><input type="checkbox" oninput="check2();"><span>파인애플</span></label>
<label><input type="checkbox" oninput="check2();"><span>용과</span></label>
<label><input type="checkbox" oninput="check2();"><span>샤인머스켓</span></label>
<label><input type="checkbox" oninput="check2();"><span>스타후르츠</span></label>
<hr>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
<label>
<input type="checkbox" oninput="checkToggle2();" class="check-all">
<span>전체 선택</span>
</label>
</body>
</html>
'[LANG] > - Jquery' 카테고리의 다른 글
| [Jquery]addClass(),removeClass(),toggleClass(),hasClass() (0) | 2022.06.04 |
|---|---|
| [Jqeury]Doit _javascript & jquery 시작 (0) | 2022.06.03 |
| [Jquery] jquery로 클래스 제어하기 (0) | 2022.06.03 |
| [Jquery] jquery로 이벤트 적용 하기 Event (0) | 2022.06.03 |
| [Jqeury] JavaScript 와 jqeury (0) | 2022.06.03 |
댓글