[jQuery] checkbox , select 제어하기

정말 많이 쓰이는 두 종류의 태그지만 가끔씩 생각이 나지 않을때가 있다...ㅠㅠ

그래서 두 가지를 정리해보자.

checkbox

<input type="checkbox" id="chk">

# checkbox 체크 및 체크 해제

$("[id=chk]").attr("checked" , true);

$("[id=chk]").attr("checked" , false);

 

# checkbox 체크 여부

$("[id=chk]").is("checked");

 

# checkbox 체크된 값

$("[id=chk]:checked").val();

 

여러개인 경우 each 활용

$("[id=chk]:checked").each(function(){

$(this).val();

});

 

# checkbox 수

$("[id=chk]").length;

selectbox

<select id="sel">

<option value="1">1번</option>

<option selected="selected" value="2">2번</option>

</select>

 

# select 선택값 변경

$("[id=sel]").val("1");

 

# select 선택된 value값

$("[id=sel] :selected").val();

 

# select 선택된 text값

$("[id=sel] :selected").text();

$("[id=sel] :selected").html();

result : 2번

 

# select 선택된 index 값 (index 는 0부터 시작)

$("[id=sel] :selected").index();

 

# select 처음과 마지막 option 접근

$("[id=sel] option:first")

$("[id=sel] option:last")

 

# select index로 선택값 변경

$("[id=sel] option:eq(0)").attr("selected" , "selected");

 

# select index로 option 값 삭제

$("[id=sel] option:eq(0)").remove();

 

# select option 총 개수

$("[id=sel] option").length;

 

# select option 추가 (before , after , append)

$("[id=sel] option:eq(1)").before("<option></option>");

$("[id=sel] option:eq(1)").after("<option></option>");

 

$("[id=sel]").append("<option> </option>");