본문 바로가기

강좌/jQuery

제이쿼리(jQuery) - 폼 요소의 값 가져오기 및 설정


<예제>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

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

        <title> 폼 요소의 값 가져오기 및 설정</title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<script>

   $(document).ready(function (){

   //초기값

$('#txtName').val("google");

$('input:radio').val(['f']);

$('#lst').val(['0','2']);


   $('#btnok').click(function(){

var msg = "";

//반드시 폼요소의 value속성을 가져온다 <> 에러

msg += $('#txtName').val() + '\n';

//라디오버튼의 체크된 value속성을 가져옴<>undefined

msg += $('input:radio[name=gen]:checked').val() + '\n';

//리스트박스에서 여러개 값 가져오기

msg += $('#lst').val().join("|") + '\n';

alert(msg);

});    

});

</script>

    </head>

    <body>

   텍스트박스 : <input type="text" id="txtName" /><br />

라디오버튼 : 

   <input type="radio" id="gen1" name="gen" value="m" />남

   <input type="radio" id="gen2" name="gen" value="f" />여

   드롭다운리스트

   <select id="lst" multiple="multiple" size="3">

   <option value="0">자바스크립트</option>

   <option value="1">제이쿼리</option>

   <option value="2">프로토타입</option>

</select>

<input type="button" value="확인" id="btnok" />

</body>

</html>