JQuery 올체크 올해제

it/jQuery 2014. 8. 22. 10:31 Posted by 하얀나다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title>스타트래커!</title>

  

  <link rel="stylesheet" href="css/base.css" type="text/css" media="screen" charset="utf-8" />  

  <link rel="stylesheet" href="css/form.css" type="text/css" media="screen" charset="utf-8" />  

  <script src="../lib/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="lib/jquery.validate.js" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript" src="jquery/jquery.js"></script>


</head>

<body>

  <div id="container">

    <div id="content">

      <div id="signup">

        <h2>회원 가입</h2>

        <form action="">

          <div>

            <label for="name">이름:</label>

            <input name="name" id="name" type="text"/>

          </div>

          <div>

            <label for="email">이메일:</label>

            <input name="email" id="email" type="text"/>

          </div>

          <div>

            <label for="website">웹사이트 URL:</label>

            <input name="website" id="website" type="text"/>

          </div>

          <div>

            <label for="password">암호:</label>

            <input name="password" id="password" type="password" />

          </div>

          <div>

            <label for="passconf">암호 확인:</label>

            <input name="passconf" id="passconf" type="password" />

          </div>


<div class="stats">

          <h2 class="title"> 모든 항목에 동의해야 합니다. </h2>

          <input name="agree" type="checkbox" value="ga" />(가)조항<br/>

          <input name="agree" type="checkbox" value="na" />(나)조항<br />

          <input name="agree" type="checkbox" value="da" />(다)조항<br />

          <input name="agree" type="checkbox" value="la" />(라)조항<br />

          <input name="agree" type="checkbox" value="ma" />(마)조항<br />

          <hr/>

          <input class="check-all" name="agree" type="checkbox" /><span>위 조항 모두</span>

          <br/>

        </div>


        <div>

           <input type="submit" value="보내기" />

        </div>

       

</form>

      </div>

   

    </div>


 </div>

</body>

</html>




$(document).ready(function() {

/*
* form의 validation : jquery.validate.js나 jquery.validate.min.js 파일에서 확인한다.
*  - required : 필수입력 - email : 이메일형식 - url : 웹주소형식 - minlength, maxlength :
* 글자길이 - equalTo : 동일한지 여부
*  - success 콜백함수로 label에 값과 클래스를 지정하여 추가한다. (*) label에 valie 클래스는
* form.css에 이미 정의되어 있음 (*) Firebug로 확인
*/
$('#signup form').validate({
rules : {
name : {
required : true
},
email : {
required : true,
email : true
},
website : {
url : true
},
password : {
minlength : 6,
required : true
},
passconf : {
equalTo : "#password"
}
},

success : function(label) {
label.text('OK!').addClass('valid');
}
});

$('.check-all').change(function() {
if (this.checked) {
//alert("체크됨");
$('input[name = "agree"]').prop('checked',true);
} else {
//alert("체크풀림");
$('input[name = "agree"]').prop('checked',false);
}
});
// $('input[name = "agree"]')

});


저작자표시

'it > jQuery' 카테고리의 다른 글

페이지 오픈시 제일먼저 실행 하고 싶을때.  (0) 2017.09.01
글자 추가하고 터치하면 색변화, 그후 글추가하면 하위<li> 로  (0) 2014.08.21
jquery tabs 긴거  (0) 2014.08.21
jquery tabs  (0) 2014.08.21
마우스오버 됫을때 그림이 바껴 신기신기  (0) 2014.08.21
 

티스토리툴바