준호씨의 블로그

jquery - checkbox 컨트롤 하기 본문

개발이야기

jquery - checkbox 컨트롤 하기

준호씨 2017. 7. 16. 10:53
반응형

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();

참고

https://api.jquery.com/attribute-contains-selector

반응형

'개발이야기' 카테고리의 다른 글

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