[JS] dom (전체선택, 선택한 option 표기)

allrouvel 2024. 3. 4. 11:32

2024. 3. 4. 11:32

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

allrouvel

[JS] dom (전체선택, 선택한 option 표기)

'[JS]' 카테고리의 다른 글

+ Recent posts

티스토리툴바