radio 동적으로 생성,삭제,체크 하기!

2021. 1. 21. 14:27ㆍ개발하는중/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
114
115
<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='radio' 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:radio[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);
                $("#div_chk > #id_chk").removeClass("readonly");
            }else{
                $("#div_chk > #id_chk").prop("checked",true);
                $("#div_chk > #id_chk").addClass("readonly");
            }
            
        });
        
        
        
    });
</script>
</body>
cs
728x90

'개발하는중 > javascript or jquery' 카테고리의 다른 글

셀렉트박스(selectbox) 동적 option 넣기!  (1) 2021.01.22
select box 동적으로 생성,삭제,선택 하기!  (0) 2021.01.21
checkbox 동적으로 생성,삭제,체크 하기!  (0) 2021.01.21
javascript 현재날짜 구하기  (0) 2021.01.13
동적 onclick 이벤트  (0) 2020.12.16

관련글

댓글 0

티스토리툴바