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 |