[Javascript/Jquery] 체크박스(Check Box) 사용법 정리(체크박스 선택/ 체크박스 해제/ 체크박스 체크여부/ 체크박스 체크된 값 가져오기)

체크박스

체크박스는 공통된 카테고리의 값들 중 여러개의 값을 선택해야 할때 주로 사용됩니다.

 

이번 피드에서는 체크박스의 기본 폼과 선택, 해제, 체크된 값을 가져오는 방법을 알아보겠습니다.

 

 

1. 체크박스 기본 폼

---

    <div>
        <input type="checkbox" name="number" value="1">1
        <input type="checkbox" name="number" value="2">2
        <input type="checkbox" name="number" value="3">3
        <input type="checkbox" name="number" value="3">4
    </div>

코드 실행 화면

---

 

위의 코드는 체크박스의 기본 형태코드입니다. 그리고 코드 밑에 이미지는 실행결과 화면 입니다.

 

<input>태그에 type값을 checkbox로 입력해주면 체크박스가 생성되게 됩니다.

 

체크박스를 생성해 name, value값을 컨트롤하여 사용하면 되겠습니다.

 

 

2. 체크박스 체크(선택) / 체크박스 해제

    <div>
        <input type="checkbox" id="one"     name="number" value="1">1
        <input type="checkbox" id="two"     name="number" value="2">2
        <input type="checkbox" id="three"   name="number" value="3">3
        <input type="checkbox" id="four"    name="number" value="3">4
    </div>
    <script>
        $("input:checkbox[id='one']").prop("checked", true);   // 체크박스 체크 
        $("input:checkbox[id='one']").prop("checked", false);   // 체크박스 해제 
    </script>

위의 코드는 체크박스를 체크, 해제하는 코드입니다.

 

 

- 체크박스 체크

$("input:checkbox[id='체크할 ID값']").prop("checked", true);

$("#체크할 ID값").prop("checked", true);

 

 

- 체크박스 해제

$("input:checkbox[id='체크해제 할 ID값']").prop("checked", false);

$("#체크해제할 ID값").prop("checked", false);

 

각각 ID값을 이용하여 위와같이 체크박스를 체크하고 해제할 수 있습니다.

 

 

3. 체크박스 체크된 값 가져오기

// name이 number인 체크박스에서 체크된 요소 선택$("input:checkbox[name=number]:checked").each(function() {
    var checkVal = $(this).val(); // 체크된 값의 value값 가져오기
    console.log(checkVal);
});

체크박스에서 체크된 값을 가져오는 방법은 위의 코드와 같습니다.

 

위의 코드는 체크박스의 name값을 이용하여 전체 체크박스 중 체크된 요소를 추출하여 해당 체크박스 요소에서 값을 가져오는 방식입니다.

 

---

이상으로 체크박스에 관한 체크, 해제, 체크된 값 조회하기 피드를 마치겠습니다.