고정 헤더 영역
상세 컨텐츠
본문
반응형
라디오버튼과 체크박스의 값을 가져오는 예제입니다.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//체크박스
$("#checkButton").click(function(event){
var checkboxYn = $("input:checkbox[name='checkBoxExample']").is(":checked")?"Y":"N"; //$("#checkBoxExample").is(":checked")
alert(checkboxYn);
});
//라디오 버튼
$("#radioButton").click(function(event){
var radioYn = $("input:radio[name='radioExample']:checked").val(); //$('#radioExample:checked').val()
alert(radioYn);
});
});
</script>
</head>
<body>
<h1>
CheckBox 테스트
</h1>
<P>
<input type="checkbox" id="checkBoxExample" name="checkBoxExample"> 체크박스 테스트
</P>
<P>
<button type="button" id="checkButton" name="checkButton">체크박스 확인 버튼</button>
</P>
<br>
<h1>
Radio 테스트
</h1>
<p>
<input type="radio" name="radioExample" value="Y" checked> 동의합니다. <br>
<input type="radio" name="radioExample" value="N"> 동의하지 않습니다.
</p>
<P>
<button type="button" id="radioButton" name="radioButton">라디오 버튼 확인 버튼</button>
</P>
</body>
</html>
위의 소스를 실행하시면 아래 웹페이지 처럼 보입니다.
CheckBox 테스트
체크박스 테스트
Radio 테스트
동의합니다.
동의하지 않습니다.
반응형
'JavaScript & HTML' 카테고리의 다른 글
| 플로팅 이미지 (스크롤 따라다니는 이미지) (0) | 2015.03.23 |
|---|---|
| jquery href 함수호출 (함수 선언) (0) | 2015.03.11 |
| jquery blur, setTimeout (시간 후 함수실행) (0) | 2015.02.11 |
| javascript confirm (컨펌) (0) | 2015.02.09 |
| 해당 폼 지정하여 서브밋 (submit) (0) | 2015.02.09 |
댓글 영역