Notice
Recent Posts
Recent Comments
준호씨의 블로그
jquery - checkbox 컨트롤 하기 본문
반응형
selector
다음과 같은 html 코드가 있으면
<html>
<meta charset="utf-8"><meta charset="utf-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkboxId1" name="checkboxName">체크박스1</input>
<input type="checkbox" id="checkboxId2" name="checkboxName">체크박스2</input>
</body>
</html>다음과 같이 체크박스가 나타납니다.
일단 이 DOM 객체를 선택해야 합니다. 이 DOM 객체를 찾아서 선택하는 방법에는 여러가지가 있지만 id 가 있으니 id 를 사용해 보겠습니다. id 는 고유한 것이 기본이라 id 로 선택하는 경우 다음과 같이 checkboxId 를 선택할 수 있습니다.
$("#checkboxId1")
아래와 같은 방법도 가능한데 위의 방법이 가장 간단하죠?
$("input:checkbox[id=checkboxId])
$("input[type=checkbox][id=checkboxId])
$("input:checkbox#checkboxId")
name 으로 선택하려면 다음과 같이 할 수 있습니다.
$("input:checkbox[name=checkboxName]")
다만, 같은 name 으로 된 checkbox 는 여러개일 수 있습니다. 그런 경우 여러개가 선택됩니다.
체크 된 것 select 하기
check 된 것들을 선택하려면 :checked 를 추가합니다.
$("input:checkbox[name=checkboxName]:checked")
체크하기/체크해제하기
체크를 하려면 checked prop 를 true 고 하고, 체크를 해제 하려면 false 로 합니다.
// 체크
$("#checkboxId1").prop("checked", true);
// 체크 해제
$("#checkboxId1").prop("checked", false);
jQuery 1.5 버전 이하에서는 방법이 좀 다르니 주의해야 합니다.
// 체크
$("#checkboxId1").attr("checked", true);
// 혹은
$("#checkboxId1").attr("checked", "checked");
// 체크 해제
$("#checkboxId1").removeAttr("checked");체크 여부 확인하기
체크 상태인지 확인 하는 방법입니다.
$("#checkboxId1").is(":checked");
check 된 것 갯수 확인
check 된 것들의 갯수를 확인 하는 방법입니다.
$("input:checkbox:checked").length;
응용 - check 된 것 들의 값 리스트 구하기
var items = [];
$('input:checkbox[type=checkbox]:checked').each(function () {
items.push($(this).val());
});
var items = $('input:checkbox[type=checkbox]:checked').map(function () {
return this.value;
}).get();
참고
반응형
'개발이야기' 카테고리의 다른 글
| vim 한글 깨지는 문제 해결 (0) | 2017.09.13 |
|---|---|
| Maven - Lombok cannot find symbol (0) | 2017.08.08 |
| php - array count 하기. length 구하기 (0) | 2017.07.15 |
| 판교의 전자부품 상가 (0) | 2017.06.18 |
| python - array length 구하기, array count (0) | 2017.06.11 |
'개발이야기' Related Articles
more
Comments