':checkbox:checked[실습]' 태그의 글 목록

':checkbox:checked[실습]'에 해당되는 글 1건

2012.06.11 jQuery정의 필터 셀렉터 정의, :text, :checkbox:checked[실습]

jQuery정의 필터 셀렉터 정의, :text, :checkbox:checked[실습]

프로그래밍/jQuery 2012. 6. 11. 14:00

$.each(배열, function(){}) //jQuery.each(배열, function(){})

$(셀렉터).eaxh(function(){
$(this)
}) //셀렉터를 조회했더니 배열을 조회 했을 경우 사용

$("#chkbtn").bind("click",function(){
  var chk = $(":checkbox:checked");
  var txt = "";
  for(i=0;i<chk.length;i++){
   txt = txt + $(chk[i]).val()+ ", ";
  }
  $("#showLayer").text(txt);
});

//빨강색으로 된 부분을 아래와 같이 바꿔 쓸 수 있다.

//each() : $("배열 셀렉터").each(function) - jQuery 객체가 가지고 있는 배열 객체의 크기 만큼 반복하면서 함수 호출
$(":checkbox:checked").each(function(){
txt = txt + $(this).val()+",";//this를 가져오면 checkbox에서 선택된 값이 넘어오는데 val()함수가 jQuery것이어서 사용하기위해$(this)로 바꿔준다.
});

</script>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>

전화 : <select id="hp">
   <option value="010">공통</option>
   <option>011</option>
   <option>016</option>
   <option>019</option>
  </select>
  <br>
취미 :
영화감상 <input type="checkbox" name="hobby" value="영화감상" id="hk">
음악감상 <input type="checkbox" name="hobby" value="음악감상">
독서 <input type="checkbox" name="hobby" value="독서">
운동 <input type="checkbox" name="hobby" value="운동">
<input type="button" value="체크박스조회" id="chkbtn">
</form>
선택된 체크박스 : <div id="showLayer"></div>
</body>
</html>

* 결과

<!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>Insert title here</title>
<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//$("input[type=text]").bind("blur",function(){//blur : 포커스를 잃었을경우
$(":text").bind("blur",function(){//input[type=text]와 : text는 같다.
  var txt = $(this).val();//value값 리턴
  if(txt==""){
   alert("값을 입력하지 않았습니다.");
  }else{
   $(this).val("입력한 값 : "+txt); //value를 다시 입력한값 : txt로 셋팅
  }
});
$("#hp").bind("change",function(){
  //select에서 선택된 option 조회 - val();
  alert($(this).val());
});
$("#chkbtn").bind("click",function(){
  var chk = $(":checkbox:checked");
  var txt = "";
/*
for(i=0;i<chk.length;i++){
  txt = txt + $(chk[i]).val()+ ", ";
} */
//each() : $("배열 셀렉터").each(function) - jQuery 객체가 가지고 있는 배열 객체의 크기 만큼 반복하면서 함수 호출
$(":checkbox:checked").each(function(){
  txt = txt + $(this).val()+",";//this를 가져오면 checkbox에서 선택된 값이 넘어오는데 val()함수가 jQuery것이어서 사용하기위해$(this)로 바꿔준다.
});

$("#showLayer").text(txt);
});
$("#taBtn").bind("click",function(){
  //$("#ta").val("abcde");//textarea자리에 abcde넣기
  //alert($("#ta").val());//textarea의 값조회
  //$("#ta").text("<b>abcdefg</b>");//위의 구문을 이와 같이 바꿀수도 있다.
  //alert($("#ta").text());//val과 text는 태그문자 그대로 찍히지만 html은 태크가 적용되서 화면에 보여진다.
  $("#ta").html("<b><font color=red>abcdefg</font></b>");//위의 구문을 이와 같이 바꿀수도 있다.
  alert($("#ta").html());
});
});
</script>
</head>
<body>
<form id="form1" name="form1" action="" method="post">
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>

* 결과

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery append, appendTo, prepend, prependT메소드 사용하기 (0)	2012.06.11
jQuery를 이용한 전체목록선택하기(Attribute메소드) checkbox[실습] (0)	2012.06.11
jQuery text, html메소드 사용하기 (0)	2012.06.11
Content/DOM 변경 및 조회 메소드 (0)	2012.06.11
jQuery 마우스를 올리면 margin으로 옆으로 공간 띄우기 (0)	2012.06.11