반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//브라우저 내장객체
//window - location
// - history
// - document - images, link,...
// - form - text,password,textarea
// - checkbox, radio
// - select - option
//document.폼이름.라디오박스이름[0].멤버변수 type name value
// checked 선택되어있으면 true/안되어있으면 false
//document.폼이름.라디오박스이름[0].멤버함수() focus() blur() click()
function fun1() {
alert(document.fr.ra[0].type);
alert(document.fr.ra[0].name);
alert(document.fr.ra[0].value);//첫번째 value값 출력
alert(document.fr.ra[0].checked); //첫번째에 체크되어 있으면 true, 아니면 false 출력
// document.fr.ra[0].focus();
// document.fr.ra[0].blur();
document.fr.ra[0].click();//첫번째 value에 체크됨
}
function fun2() {
// alert("남 선택 : "+document.fr.ra[0].checked);
// alert("여 선택 : "+document.fr.ra[1].checked);
if(document.fr.ra[0].checked==false && document.fr.ra[1].checked==false){ //둘다 체크되어있지 않다면
alert("라디오박스 선택하세요");
// 함수 호출한 곳을 되돌아감
return;
}
// 체크박스 모두 선택이 안되어있으면 "체크박스 선택하세요" 리턴
if(document.fr.ch[0].checked==false && document.fr.ch[1].checked==false){
alert("체크박스 선택하세요");
return;
}
//선택이 되면 데이터를 가지고 a.jsp 전송(이동)
document.fr.submit();
}
</script>
</head>
<body>
<h1>js2/test3.html</h1>
<form action="a.jsp" method="get" name="fr">
<input type="radio" name="ra" value="남">남자
<input type="radio" name="ra" value="여">여자<br>
<input type="checkbox" name="ch" value="여행">여행
<input type="checkbox" name="ch" value="게임">게임<br>
<input type="button" value="라디오상자정보" onclick="fun1()">
<input type="button" value="라디오상자제어" onclick="fun2()">
</form>
</body>
</html>
document.fr.ra[0].click();//첫번째 value에 체크됨
if(document.fr.ch[0].checked==false && document.fr.ch[1].checked==false){
alert("체크박스 선택하세요");
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] form 태그 사용해서 회원가입 창만들기 (0) | 2021.11.11 |
|---|---|
| [JavaScript] 폼 속성 form(select) (0) | 2021.11.11 |
| [JavaScript] 텍스트 상자 (0) | 2021.11.11 |
| [JavaScript] 폼 속성 form(text,password,textarea) (0) | 2021.11.11 |
| [JavaScript] 브라우저 내장객체(document) (0) | 2021.11.09 |