728x90
반응형
1. selector 연습코드 (body)
1) 아래의 텍스트박스에 입력한 후 선택을 눌렀을 때, radio에 체크했을때, checkbox를 클릭했을 때
각 value값이 body의 div(화면에서는 select위 공백)에 나타날 수 있도록 하자.
2) radio에 선택한 값이 index와 함께 alert창으로 나타나도록 하자.
<body>
<form action="">
<input type="text"/>
<input type="button" value="선택" onclick="c1();"/>
<input type="radio" value="20/6/5~" onclick="c2();"/>20/6/5~
<input type="checkbox" value="빅데이터 전문가" onclick="c3();"/>빅데이터 전문가 과정
<div id="res"></div>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</form>
</body>
2. script
jquery를 사용했을 때 코드가 조금 더 길어질 수도 있는 상황 발견... javascript로 했을 때와 두가지 방법으로 해보았다.
<script type="text/javascript">
function c1(){
//alert($("input").eq(0).val());
alert($("input:text").val());
}
function c2(){
var val = $("input:radio").val();
//$("#res").text(val);
$("#res").html(val);
}
function c3(){
$("#res").html($("input:checkbox").val());
}
$(function(){
// var sel = $("select").eq(0);
// sel.change(function(){
// alert(sel.children("option:selected").val() + " : "
// + sel.children("option").index($("select option:selected")));
// });
var sel = document.getElementsByTagName("select")[0];
sel.onchange=function(){
alert(sel.options[sel.selectedIndex].value + " : " + sel.selectedIndex);
}
})
</script>728x90
반응형
'Web > JQuery' 카테고리의 다른 글
| [JQ]DOM_트리탐색메소드 (0) | 2020.07.31 |
|---|---|
| [JQ]DOM_필터링메소드 (0) | 2020.07.31 |
| [JQ]selector_02 (0) | 2020.07.31 |
| [JQ]selector_01 (0) | 2020.07.31 |
| [JQ]기본작성법 (0) | 2020.07.31 |
