checkbox 동적으로 생성,삭제,체크 하기!
2021. 1. 21. 12:29ㆍ개발하는중/javascript or jquery
728x90
반응형
스크립트 단에서 jquery사용하여 동적으로 삭제 생성 체크를 해주는 테스트입니다.
body만 붙여 넣어서 테스트 해보시면 됩니다! jquery꼭 있어야되구요!
숫자 입력받아 체크박스 선택하는 경우 개발 시 빽단에서 데이터 받아 뿌려줄때 쓰면
굉장히 좋을거 같습니다.!
이것과 비슷한 라디오도 올려보겠습니다.! 그리고 동적으로 하는 방법이 더 있으면 수정해 추가하겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
<body>
<p>체크박스 동적 제어</p>
<input type="button" id="btn1" name="btn1" value="추가">
<input type="button" id="btn2" name="btn2" value="마지막 체크박스 삭제">
<input type="button" id="btn3" name="btn3" value="전체삭제">
<input type="button" id="btn4" name="btn4" value="박스선택입력체크">
<input type="button" id="btn5" name="btn5" value="전체체크선택">
<input type="button" id="btn6" name="btn6" value="전체체크해제">
<input type="button" id="btn7" name="btn7" value="체크여부확인후전체바꾸기">
<div id="div_chk">
<!-- <span>0</span><input type="checkbox" id="id_chk" class="class_chk" name="chk0" value="0"> -->
<!-- <span>1</span><input type="checkbox" id="id_chk" class="class_chk" name="chk1" value="1"> -->
</div>
<script type="text/javascript">
$(document).ready(function(){
// 추가
var i = 0;
$("#btn1").on("click", function() {
i = $("#div_chk > #id_chk").length;
console.log(i);
$("#div_chk").append("<span id='span_chk'>"+i+"</span><input type='checkbox' id='id_chk' class='class_chk' name='chk"+i+"' value='"+i+"'>");
});
// 마지막 순번 삭제
$("#btn2").on("click", function() {
i = $("#div_chk > #id_chk").length - 1;
console.log(i);
$("#div_chk > #id_chk").eq(i).remove();
$("#div_chk > #span_chk").eq(i).remove();
});
// 전체삭제
$("#btn3").on("click", function() {
$("#div_chk").empty();
});
// 박스선택입력체크
$("#btn4").on("click", function() {
i = $("#div_chk > #id_chk").length-1;
console.log(i);
if(i < 0){
alert("체크박스가 존재 하지 않습니다.");
return;
}
let num = prompt("체크하고 싶은 체크박스 숫자 입력!", "숫자만 입력해주세요!");
var regexp = /^[0-9]*$/
var temp = num;
if(num > i){
alert("체크박스가 존재 하지 않습니다.");
return;
}
if(!regexp.test(temp)){
alert("숫자만 입력하세요");
return;
}
$("input:checkbox[name='chk"+num+"']").prop("checked",true);
});
// 전체선택
$("#btn5").on("click", function() {
i = $("#div_chk > #id_chk").length-1;
console.log(i);
if(i < 0){
alert("체크박스가 존재 하지 않습니다.");
return;
}
$("#div_chk > #id_chk").prop("checked",true);
});
// 전체해제
$("#btn6").on("click", function() {
i = $("#div_chk > #id_chk").length-1;
console.log(i);
if(i < 0){
alert("체크박스가 존재 하지 않습니다.");
return;
}
$("#div_chk > #id_chk").prop("checked",false);
});
// 체크여부확인후전체바꾸기
$("#btn7").on("click", function() {
i = $("#div_chk > #id_chk").length-1;
console.log(i);
if(i < 0){
alert("체크박스가 존재 하지 않습니다.");
return;
}
if($("#div_chk > #id_chk").is(":checked")){
$("#div_chk > #id_chk").prop("checked",false);
}else{
$("#div_chk > #id_chk").prop("checked",true);
}
});
});
</script>
</body>
|
cs |
728x90
'개발하는중 > javascript or jquery' 카테고리의 다른 글
select box 동적으로 생성,삭제,선택 하기! (0) | 2021.01.21 |
---|---|
radio 동적으로 생성,삭제,체크 하기! (0) | 2021.01.21 |
javascript 현재날짜 구하기 (0) | 2021.01.13 |
동적 onclick 이벤트 (0) | 2020.12.16 |
모바일 사진 촬영하여 업로드시 익스플로러 사진회전현상 (0) | 2020.12.16 |