'jquery checkbox'에 해당되는 글 2건

JQuery prop, 체크박스 전체 선택, 전체 해제

2020/JQuery 2020. 3. 5. 17:35
반응형
<!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() {
        $("#total").click(function() {
          if ($("#total").prop("checked")) {
            $("input[type=checkbox]").prop("checked", true);
          } else {
            $("input[type=checkbox]").prop("checked", false);
          }
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <table>
      <tr>
        <th class="boardChk"><input type="checkbox" id="total" />전체</th>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트1</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트2</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트3</td>
      </tr>
      <tr>
        <td><input type="checkbox" id="test[]" />테스트4</td>
      </tr>
    </table>
  </body>
</html>
반응형
저작자표시

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

JQuery 엘리먼트 순서 알아내기  (0) 2020.03.05
JQuery height, width  (0) 2020.03.05
Jquery focus, blur, focusin, focusout  (0) 2020.03.05
JQuery change  (0) 2020.03.04
JQuery window.resize  (0) 2020.03.04
블로그 이미지

꽃꽂이하는개발자

,

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
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

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

티스토리툴바