728x90
반응형
asf
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>속성 설정</title> <style> /* 그룹선택자 */ input[type="text"], select, button { box-sizing: border-box; width: 600px; height: 50px; margin-bottom: 10px; max-width: 100%; /*max-width > meta name="viewport"가 있어야 사용가능 image의 경우 화질이 깨지지 않도록 해주는 역할을 함*/ } input[type="checkbox"] { width: 20px; height: 20px; margin: 0 5px 0 0; vertical-align: bottom; /* vertical-align : 내가 감싸고 있는 인라인요소 자체 수직정렬 */ /* text-align : 내가 감싸고 있는 인라인요소의 부모요소에 */ } .labelClass { margin-right: 20px; } </style> <script> /* script는 가장 마지막에 기술된 것이 덮여씌여짐 */ //form태그 모두 배열로 가져오기 var Frm = document.forms; //체크박스 전체선택, 해제 //선언적함수 function 함수명 (){} function allCheckBox() { let chkArr = document.forms[0].season; let cnt = 0; chkArr.forEach(function (obj, idx) { // if(chkArr[idx].checked == true) { if (obj.checked == true) { cnt++; } }); if (cnt == chkArr.length) { chkArr.forEach(function (obj, idx) { chkArr[idx].checked = false; }); } else { chkArr.forEach(function (obj, idx) { chkArr[idx].checked = true; }); } } //과목선택 버튼 클릭시 select 옵션, 텍스트박스 변경 function selSubject() { Frm[1].selSub.options[2].selected = true; Frm[1].subnm.value = Frm[1].selSub.options[2].innerText + "(" + Frm[1].selSub.options[2].value + ")"; } //전체 폼 태그 리셋하기 function resetForms() { for (let i = 0; i < Frm.length; i++) Frm[i].reset(); } //즉시실행함수 window.onload = function () { //select option값 변경 시 텍스트박스 변경 Frm[1].selSub.onchange = function (e) { console.log(e); let idx = e.srcElement.selectedIndex; Frm[1].subnm.value = Frm[1].selSub.options[idx].innerText + "(" + this.value + ")"; }; //this. 이벤트가 발생한 태그 내 //체크 박스 중 하나라도 해제된 경우 전체선택 해제하기 let chk = document.getElementsByName("season"); //배열로 갖고옴 //1.요소값 2.인덱스 번호 chk.forEach(function (o, i) { chk[i].onclick = function () { let cntchk = 0; chk.forEach(function (o1, i1) { if (o1.checked == true) cntchk++; }); if (cntchk == chk.length) Frm[0].allChk.checked = true; else Frm[0].allChk.checked = false; }; }); }; </script> </head> <body> <form> <h2>계절 선택(다중)</h2> <input type="checkbox" id="allChk" onclick="allCheckBox()" /> <label for="allChk" class="labelClass">전체선택</label><br /><br /> <label class="labelClass" ><input type="checkbox" name="season" value="spring" />봄</label > <label class="labelClass" ><input type="checkbox" name="season" value="summer" />여름</label > <label class="labelClass" ><input type="checkbox" name="season" value="fall" />가을</label > <label class="labelClass" ><input type="checkbox" name="season" value="winter" />겨울</label > <br /><br /> <button>전송</button> </form> <hr /> <form onsubmit="return FormChk(this)"> <h2>과목선택</h2> <button type="button" onclick="selSubject()">과목선택</button><br /> <input type="text" name="subnm" placeholder="선택한 과목명이 나타납니다." /><br /> <select name="selSub"> <option value="">과목선택</option> <option value="mat">수학</option> <option value="kor">국어</option> <option value="eng">영어</option> <option value="soc">사회</option> <option value="sci">과학</option></select ><br /><br /> <button>전송</button> </form> <hr /> <script> //텍스트박스에 포커스처리 function FormChk(val) { if (val.subnm.value == "") { //입력요소들은 미입력 후 전송시 빈 문자열 전송 alert("과목을 선택해주세요."); val.subnm.focus(); return false; //감싸고 있는 함수를 빠져 나가라 } } </script> <button onclick="resetForms()">리셋</button> </body> </html>
ㅁㄴㅇ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>요소 제어</title> <style> #addFruit, #removeFruit { box-sizing: border-box; width: 344.47px; height: 57px; margin-bottom: 10px; font-size: 20px; } button { padding: 15px 20px; border-radius: 8px; border: 1px solid #aaa; font-size: 20px; } button:focus { background-color: #333; color: white; } </style> <script> function min_max() { let len = document.getElementsByTagName("li").length; //[0]<li>사과</li> //[1]<li>바나나</li> if (len > 0) { // document.getElementById('removeFruit').setAttribute("placeholder", "삭제할 목록 인덱스번호 입력"); document.getElementById("removeFruit").setAttribute("max", (len - 1).toString()); //<input type="numbeer"id="removeFruit"placeholder="삭제할 목록 인덱스번호 입력"min="0"max="0"> //setAttribute: 없는 속성은 생성, 있는 속성은 변경 document.getElementById("removeFruit").value = len - 1; } } </script> </head> <body> <h1>과일목록</h1> <ul class="fruits"> <li>사과</li> <li>바나나</li> </ul> <div style="position: fixed; top: 20px; right: 0px"> <!-- fixed : body 기준으로 부모를 삼는다 --> <input type="search" id="addFruit" placeholder="추가할 과일 입력"> <br> <button onclick="addF()">[1]번 인덱스요소의 형 요소로 추가</button><br> <!-- form태그 안에 존재하지 않는 default button --> <!-- onclick 이벤트핸들러이기에 js function실행 --> <script> function addF() { let newTag = document.createElement("li"); //<li>리치</li> let stdTag = document.getElementsByTagName("li")[1]; newTag.innerText = document.getElementById("addFruit").value != "" ? document.getElementById("addFruit").value: "오렌지"; document.getElementsByClassName("fruits")[0].insertBefore(newTag, stdTag); //자식으로 insertBefore(추가할요소,기준점요소) min_max(); } </script> <button onclick="addLastF()">마지막 목록으로 추가</button><br /> <script> function addLastF() { let newTag = document.createElement("li"); let stdTag = document.getElementsByTagName("li")[1]; newTag.innerText = document.getElementById("addFruit").value != "" ? document.getElementById("addFruit").value: "오렌지"; document.getElementsByClassName("fruits")[0].appendChild(newTag, stdTag); //막내자식으로 추가 min_max(); } </script> <button onclick="cloneF()">맨처음 목록 복제</button><br /><br /> <script> function cloneF() { let newTag = document.getElementsByTagName("li")[0].cloneNode(true); document.getElementsByClassName("fruits")[0].appendChild(newTag); min_max(); } </script> <input type="numbeer"id="removeFruit"placeholder="삭제할 목록 인덱스번호 입력" min="0"max="0"><br /> <button onclick="rmF()">선택목록삭제</button><br /> <script> function rmF() { let len = document.getElementsByTagName("li").length; if (len > 0) { let pa = document.getElementsByClassName("fruits")[0]; let selIdx = document.getElementById("removeFruit").value; let selEle = pa.getElementsByTagName("li")[selIdx]; pa.removeChild(selEle); //형식상 삭제되지만 메모리에는 남아있게됨 } else { alert("삭제할 목록이 없습니다."); return; } min_max(); } (function () {min_max();})(); // js의 즉시실행함수 // (onload - body 컴파일 후에, // function(){} - 기술한 시점에 바로 실행) // 호이스팅이 되지 않더라도 // 한 페이지내에서 다른 script더라도 호출 가능. </script> </div> </body> </html>
728x90
반응형
'[JS]' 카테고리의 다른 글
[JS] window.location.href / window.history (0) | 2024.03.04 |
---|---|
[JS] BOM(Browser Object Model) (0) | 2024.03.04 |
[JS] ex)email 문자 객체를 이용한 예제 (0) | 2024.02.29 |
[JS] string (0) | 2024.02.29 |
[JS] 수학객체 (0) | 2024.02.29 |