JQuery selectBox 유효성검사

2020/JQuery 2020. 2. 28. 13:12
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //value값 가져오기
      function fnValuesel() {
        alert($("#PrettyGirls").val());
      }
      //text값 가져오기
      function fnTextValalert() {
        alert($("#PrettyGirls option:selected").text());
      }
      //인덱스값 가져오기
      function idxValueGo() {
        alert(
          $("#PrettyGirls option").index($("#PrettyGirls option:selected"))
        );
      }

      //value값으로 세렉트 시키는 방법 2가지
      function fnSelectedCombo() {
        var slcNumOp = $("#slcNum option:selected").val();
        console.log(slcNumOp);
        // var slcNumOpval = $("#slcNum option:selected").val();
      }

      function fnRemoveCombo() {
        var slcNumOp = $("#slcNum option:checked").val() - 1;
        console.log(slcNumOp);
        $("#slcNum option:eq('" + slcNumOp + "')").remove();
      }

      function fnAppendCombo() {
        var addSlcNum = $("#PrettyGirls option").size() + 1;
        $("#PrettyGirls").append(
          "<option value='" + addSlcNum + "'>연예인</option>"
        );
      }

      function fnReplaceCombo() {
        var slcNumOp = $("#slcNum option:selected").val() - 1;
        $("#PrettyGirls option:eq('" + slcNumOp + "')").replaceWith(
          "<option value='" +
            $("#slcNum option:selected").text() +
            "'>한효주</option>"
        );
      }
    </script>
    <title>selectBox 유효성 검사</title>
  </head>
  <body>
    <select id="PrettyGirls">
      <option value="numOne">신민아</option>
      <option value="numTwo">전지현</option>
      <option value="numThree">원빈</option>
      <option value="numFour">이나영</option>
      <option value="numFive">장동건</option>
      <option value="numSix">고소영</option>
    </select>

    <input type="button" value="value값" onclick="fnValuesel();" />
    <input type="button" value="text값" onclick="fnTextValalert();" />
    <input type="button" value="index값" onclick="idxValueGo();" />

    <select id="slcNum">
      <option value="1">num1</option>
      <option value="2">num2</option>
      <option value="3">num3</option>
      <option value="4">num4</option>
      <option value="5">num5</option>
      <option value="6">num6</option>
      <option value="7">num7</option>
    </select>

    <input type="button" value="선택" onclick="fnSelectedCombo();" />
    <input type="button" value="제거" onclick="fnRemoveCombo();" />
    <input type="button" value="추가" onclick="fnAppendCombo();" />
    <input type="button" value="교체" onclick="fnReplaceCombo();" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery 요소 추가(형제관계)  (0) 2020.02.29
JQuery 요소 감싸기, 요소 태그 넣기  (0) 2020.02.29
JQuery radio button 유효성 검사  (0) 2020.02.28
JQuery checkBox 유효성 검사  (0) 2020.02.28
JQuery hide, show  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery radio button 유효성 검사

2020/JQuery 2020. 2. 28. 13:11
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#regBtn").click(function() {
          invalidItem();
        });
        function invalidItem() {
          if ($("input[name=gender]:radio:checked").length < 1) {
            alert("성별을 선택하세요");
            return false;
          } else {
            alert("회원가입을 축하합니다.");
          }
        }
      });
    </script>
    <title>radio box 유효성 검사</title>
  </head>
  <body>
    <form>
      <input type="radio" name="gender" value="man" />남성
      <input type="radio" name="gender" value="woman" />여성

      <input type="button" id="regBtn" value="회원가입" />
      <input type="reset" value="취소" />
    </form>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery 요소 감싸기, 요소 태그 넣기  (0) 2020.02.29
JQuery selectBox 유효성검사  (0) 2020.02.28
JQuery checkBox 유효성 검사  (0) 2020.02.28
JQuery hide, show  (0) 2020.02.28
JQuery attr 속성변경  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery checkBox 유효성 검사

2020/JQuery 2020. 2. 28. 13:09
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="http://code.jquery.com/jquery-latest.min.js"
    ></script>
    <title>checkBox</title>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#regBtn").click(function() {
          invalidItem();
        });
        $(":reset").click(function() {
          $("#userId").focus();
        });

        //입력 유효성 검사
        function invalidItem() {
          var cnt = $("input[name=hobby]:checkbox:checked").length;
          //몇개 선택되어있는지 개발자 모드에서 확인해보세요.
          console.log(cnt);
          if (cnt < 1) {
            alert("한 개 이상을 선택하셔야 합니다.");
          } else {
            alert(cnt + "개가 선택되었습니다.");
          }
        }
        //전체 선택 해제
        $("input[name=all]").click(function() {
          var chk = $(this).is(":checked");
          console.log(chk);
          if (chk) {
            $("input[name=hobby]").attr("checked", true);
          } else {
            $("input[name=hobby]").attr("checked", false);
          }
        });
      });
    </script>
  </head>
  <body>
    <form>
      <input type="checkbox" name="all" value="all" /> 전체.
      <input type="checkbox" name="hobby" value="computer" /> 컴퓨터
      <input type="checkbox" name="hobby" value="TV" /> TV시청
      <input type="checkbox" name="hobby" value="read" /> 독서
      <input type="checkbox" name="hobby" value="game" /> 게임
    </form>

    <input type="submit" id="regBtn" value="회원가입" />
    <input type="reset" value="취소" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery selectBox 유효성검사  (0) 2020.02.28
JQuery radio button 유효성 검사  (0) 2020.02.28
JQuery hide, show  (0) 2020.02.28
JQuery attr 속성변경  (0) 2020.02.28
JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery hide, show

2020/JQuery 2020. 2. 28. 13:08
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("button[id=show]").click(function() {
          $("img").show();
        });
        $("#hide").click(function() {
          $("img").hide();
        });
      });
    </script>

    <title>Document</title>
  </head>
  <body>
    <img src="images/1.png" />
    <br />
    <button id="show">Show</button>
    <button id="hide">hide</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery radio button 유효성 검사  (0) 2020.02.28
JQuery checkBox 유효성 검사  (0) 2020.02.28
JQuery attr 속성변경  (0) 2020.02.28
JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery trigger, 이벤트 자동발생

2020/JQuery 2020. 2. 28. 13:06
반응형
<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
    <button>버튼1</button>
    <button>버튼 2</button>

    <div><span>0</span> button #1 clicks.</div>
    <div><span>0</span> button #2 clicks.</div>

    <script>
      $("button:first").click(function() {
        add($("span:first"));
      });
      $("button:last").click(function() {
        $("button:first").trigger("click");
        add($("span:last"));
      });

      function add(plus) {
        var n = parseInt(plus.text(), 10);
        plus.text(n + 1);
      }
    </script>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery hide, show  (0) 2020.02.28
JQuery attr 속성변경  (0) 2020.02.28
JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)

2020/JQuery 2020. 2. 28. 13:05
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#addClassBtn").click(function() {
          $("#target").addClass("testClass");
        });
        $("#hasClassBtn").click(function() {
          if ($("#target").hasClass("testClass") == true) {
            alert("textClass있네요?");
          } else if ($("#target").hasClass("testClass") == false) {
            alert("textClass가 없네요?");
          }
        });
        $("#removeClassBtn").click(function() {
          $("#target").removeClass("testClass");
        });

        $("#toggleClassBtn").click(function() {
          $("#target").toggleClass("testClass");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <fieldset>
      <legend>Target</legend>
      <div id="target">타겟 영역입니다.</div>
    </fieldset>
    <input type="button" id="addClassBtn" value="addClass" />
    <input type="button" id="hasClassBtn" value="hasClass" />
    <input type="button" id="removeClassBtn" value="removeClass" />
    <input type="button" id="toggleClassBtn" value="toggleClass" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery attr 속성변경  (0) 2020.02.28
JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery unbind(이벤트해제)

2020/JQuery 2020. 2. 28. 13:04
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("#btn").click(function() {
          alert("클릭됨");
        });
        $("#btnUnbind").click(function() {
          $("#btn").unbind("click");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <div id="my">
      <input type="button" id="btn" value="버튼" class="hover" />
      <input type="button" id="btnUnbind" value="이벤트 해제" class="hover" />
    </div>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery trigger, 이벤트 자동발생  (0) 2020.02.28
JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery detach, empty, remove, 요소제거

2020/JQuery 2020. 2. 28. 13:03
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        // .detach() 지정한 요소를 포함한 하위 요소 모두 제거
        $("#detachBtn").click(function() {
          $("#target").detach();
        });
        // .empty 지정한 요소의 하위 요소를 제거
        $("#emptyBtn").click(function() {
          $("#target").empty();
        });
        //remove 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거
        $("#removeBtn").click(function() {
          $("#target").remove();
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <fieldset style="height:150px; position:relative;">
      <legend>Target</legend>
      <div
        id="target"
        style="background-color:gray; height:80px; width:80%; position:relative; left:10%; top:10px"
      >
        <div
          id="innerTarget"
          style="background-color:green; height:50px; width:50%; position:absolute; left:25%; top:20%;"
        ></div>
      </div>
    </fieldset>
    <input type="button" id="detachBtn" value="detach" />
    <input type="button" id="emptyBtn" value="empty" />
    <input type="button" id="removeBtn" value="remove" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery addClass, hasClass, removeClass, toggleClass(속성추가제거)  (0) 2020.02.28
JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/07   »
일 월 화 수 목 금 토
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

티스토리툴바