-
211001_div,check,radioJQuery 2021. 10. 1. 14:46
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style type="text/css">
div {
border: 1px solid gray;
padding: 20px 20px 20px 20px;
width: 500px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h3>폼태그연습 #1</h3>
<div>
<b>아이디</b>
<input type="text" style="width: 100px;">
<br><br>
<b>비밀번호</b>
<input type="password" style="width: 100px;">
<br>
</div>
<script type="text/javascript">
//input에 포커스가 갈 경우 배경색
$("input:text,input:password").focus(function() {
$(this).css("background-color", "yellow");
});
//포커스가 벗어날 경우 다시 원래대로(흰색)
$("input:text,input:password").blur(function() {
$(this).css("background-color", "white");
})
</script>
<h3>폼태그연습 #2</h3>
<div>
<input type="checkbox" id="ckb">운전면허
<button type="button" id="btn1">확인</button> <span></span>
</div>
<script type="text/javascript">
$("#btn1").click(function() {
var a=$("#ckb").val(); //value 미지정이라 무조건 on으로 출력됨
var b=$("#ckb").is(":checked"); //value 체크상태에 따라 true,false
$("span:eq(0)").html(a+", "+b); //span에 출력
});
</script>
<h3>폼태그연습 #3</h3>
<div>
<h3>당신이 사는 도시는?</h3>
<input type="radio"name="city" value="서울">서울
<input type="radio"name="city" value="부산">부산
<input type="radio"name="city" value="제주">제주
<input type="radio"name="city" value="인천">인천
<br>
<button type="button" id="btn2">선택</button>
<span></span>
</div>
<script type="text/javascript">
$("#btn2").click(function() {
//체크된 값을 가져오기
var data=$("input[name='city']:checked").val();
$("span:eq(1)").html(data);
});
</script>
<h3>폼태그연습 #4</h3>
<div>
<h3>구현 가능한 컴퓨터 언어는?</h3>
<input type="checkbox" name="computer" value="Java">Java
<input type="checkbox" name="computer" value="Oracle">Oracle
<input type="checkbox" name="computer" value="Spring">Spring
<input type="checkbox" name="computer" value="JQuery">JQurey
<br>
<button type="button" id="btn3">선택</button>
<br>
<span></span>
</div>
<script type="text/javascript">
$("#btn3").click(function() {
//다중체크
//체크된 언어 개수 구하기..length
var lang=$("input[name='computer']:checked").length;
var s="체크 개수: "+lang;
if(lang==0)
{
s+="<br>가능한 언어 미보유";
} else {
s+="<br>";
//each : 선택한 요소가 여러개일 때 각각에 대해서 반복해서 함수 실행
//i는 index..0부터 실행, element는 index에 해당하는 태그(여기선 input태그)
$("input[name='computer']:checked").each(function(i, element) {
s+=$(this).val()+" ";
});
}
$("span:eq(2)").html(s);
});
</script>
<h3>폼태그연습 #5</h3>
<div>
<select id="selone">
<!-- select는 안에 꼭 option이 들어가야 함 -->
<option value="magenta">핫핑크</option>
<option value="gray">회색</option>
<option value="blue">파랑</option>
<option value="yellow">노랑</option>
</select>
<br>
<button type="button" id="btn4">색상가져오기</button>
<span></span>
</div>
<script type="text/javascript">
$("#btn4").click(function() {
//var text=$("selone option:selected").text(); 둘 다 같은 방법
var text=$("#selone option:checked").text();
var val=$("#selone").val();
s="<b style='color:"+val+"'>"+text+"<br>";
$("span:eq(3)").html(s);
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211005_form,table,button (0) 2021.10.05 211001_each,append,after (0) 2021.10.01 211001_clone,append (0) 2021.10.01 211001_list,select,contains (0) 2021.10.01 211001_div,mouseover,mouseout,empty,hover (0) 2021.10.01