728x90
반응형
아래 형태의 체크박스를 만들어 보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//.submit(): form 에서 submit 이벤트가 발생되면 실행
$("#signal").submit(function(){
if($(".infobox").val() == null || $(".infobox").val() == ""){
$(".error").show();
return false;
}
});
$("#confirm").click(function(){
$("#result").empty();
if($("input[name=chk]:checked").length == 0){
alert("하나 이상 체크해주세요!");
} else {
var total = 0;
$("input[name=chk]:checked").each(function(i){
var chk = $("input[name=chk]:checked").eq(i);
var book = chk.next().text();
var price = chk.val();
$("#result").append(book + " : " + price + "<br>");
total+= parseInt(price);
});
$("#result").append("총 가격:"+total);
}
});
//체크박스 하나라도 체크 해제되면 전체선택 해제
//체크박스 모두 체크되면 전체선택 체크
$("input[name=chk]").click(function(){
if($("input[name=chk]").length == $("input[name=chk]:checked").length){
$("input[name=all]").prop("checked", true);
} else {
$("input[name=all]").prop("checked", false);
}
});
/*
.prop() : javascript의 property // javascript 객체의 속성이 되어 버림(문서에서는 모름)
.attr() : html의 attribute // html 문서의 속성이 됨
*/
})
function allchk(bool){// each -> allback함수
$("input[name=chk]").each(function(){
$(this).prop("checked", bool);
});
}
</script>
</head>
<body>
<form action="" id="signal" method="get">
<div>
<span class="label">User Id</span>
<input type="text" class="infobox" name="userid"/>
<!-- 유효성검사 -->
<span class="error" hidden="" style="color:red;">반드시 입력하세요!!</span>
</div>
<input type="submit" class="submin" value="입력"/>
</form>
<hr>
<fieldset style="width:300px">
<legend>체크여부 확인</legend>
<input type="checkbox" name="all" onclick="allchk(this.checked)"/>전체선택<br>
<input type="checkbox" name="chk" value="25000"/><b>Java</b><br>
<input type="checkbox" name="chk" value="30000"/><b>DataBase</b><br>
<input type="checkbox" name="chk" value="40000"/><b>JavaScript</b><br>
<input type="button" value="확인" id="confirm"/><br>
<span>선택한 책 가격</span>
<div id="result"></div>
</fieldset>
</body>
</html>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]ajax_02 (0) | 2020.08.05 |
|---|---|
| [JQ]ajax_01 (0) | 2020.08.05 |
| [JQ]delete (0) | 2020.08.05 |
| [JQ]wrap (0) | 2020.08.05 |
| [JQ]외부삽입 (0) | 2020.08.04 |
