⚡ 전체선택 (checkbox)
- 전체선택 체크박스는 핸들링만을 위한 기능(편의) / 해당 체크박스 데이터는 보내진 않는다
<script> function abc(){ var ck = document.getElementById("all"); // if(ck.checked == true){ //true, false // //반복문을 이용하여 해당 id값을 활용함 // var i; // for(i=1; i<=5; i++){ // document.getElementById("c"+i).checked = true; // } // }else{ // var i; // for(i=1; i<=5; i++){ // document.getElementById("c"+i).checked = false; // } // } //조건문 없이 해당 오브젝트 핸들링 var i; for(i=1; i<=5; i++){ document.getElementById("c"+i).checked = ck.checked; } } //각각의 checkbox 선택 이벤트 함수 function bbb(){ //호출할때마다 count 0으로 시작하므로 count-- 넣어줄 필요 없음 //호출할때마다 0에서 현재 체크되어있는 체크박스 수만큼 1씩 증가 var count=0; var b; for(b=1; b<=5; b++){ var box = document.getElementById("c"+b).checked; if( box == true ){ count++; } } if(count == 5){ document.getElementById("all").checked = true }else{ document.getElementById("all").checked = false } } </script> <body> <!-- label에 onclick 작성하면 이벤트 2번씩 발생! --> <label><input type="checkbox" id="all" onclick="abc()">전체선택</label> <br> <input type="checkbox" id="c1" onclick="bbb()">선택1 <br> <input type="checkbox" id="c2" onclick="bbb()">선택2 <br> <input type="checkbox" id="c3" onclick="bbb()">선택3 <br> <input type="checkbox" id="c4" onclick="bbb()">선택4 <br> <input type="checkbox" id="c5" onclick="bbb()">선택5 <br> </body>
⚡ agree ( radio )
radio태그 특성 :
name 기준 / id로 컨트롤시 어려움 발생함(radio는 id를 쓰지 않고 핸들링할수 있는 유일한 태그 )
동일한 name일 경우 배열 형태의 기준으로 변경된다.(name이 동일하면 보이진 않지만 배열화가 된다.)
<script> //전체동의 이벤트 함수 function all_agree(){ // docment.getElementByName 으로 호출X 버그 발생 var k = document.getElementById('agree'); //전체동의 호출 console.log(k.checked) //name이 동일하면 - 보이진 않지만 배열화가 된다. //name은 document.getElementById('agree' + i); 이방식 못씀ㅋ if( k.checked == true ){ //전체동의 체크 agreeForm.ag1[0].checked = true; agreeForm.ag2[0].checked = true; agreeForm.ag3[0].checked = true; }else{ //전체동의 체크 해제 agreeForm.ag1[1].checked = true; agreeForm.ag2[1].checked = true; agreeForm.ag3[1].checked = true; } } </script> <body> <!-- radio는 id를 쓰지 않고 핸들링할수 있는 유일한 태그 --> <form id="agreeForm"> <input type="checkbox" id="agree" onclick="all_agree()">전체동의 <br> <input type="radio" name="ag1">동의함 <input type="radio" name="ag1" checked onclick="ccc()">동의안함 <br> <input type="radio" name="ag2">동의함 <input type="radio" name="ag2" checked onclick="ccc()">동의안함 <br> <input type="radio" name="ag3">동의함 <input type="radio" name="ag3" checked onclick="ccc()">동의안함 <br> </form> </body>
'CLASS > HTLML,CSS,JS' 카테고리의 다른 글
| #7-3 / HTML+CSS+JS 외부 로드 및 각종 핸들링 (0) | 2024.04.26 |
|---|---|
| #7-2 / HTML 오브젝트에 데이터 출력 (0) | 2024.04.26 |
| #6-2 / HTML + Javascript(video,input value(로그인)) (0) | 2024.04.25 |
| #6-1 / 배열,랜덤함수 (0) | 2024.04.25 |
| #5-2 / Js(함수) (0) | 2024.04.24 |