방구석 상상코딩

[jQuery] check 박스 값 가져오기 본문

Spring Boot/JavaScript

[jQuery] check 박스 값 가져오기

알 수 없는 사용자 2022. 1. 24. 19:57

input 태그 생성

<input type="checkbox" value="값1">값1</input>
<input type="checkbox" value="값2">값2</input>
<input type="checkbox" value="값3">값3</input>

 

1) 값 확인

// id
$('input:checkbox[id="checkBox의 id값"]').val();

// name
$('input:checkbox[name="checkBox의 name값"]').val();

 

2) 선택된 개수 확인

$("input[name='checkBox의 name값']:checked").length

 

3) 여러개 선택된 값 확인

- if 사용

var len = $("input[name='brand']:checked").length;
if(len > 1){ //개수를 체크하고 2개부터는 each함수를 통해 각각 가져온다.
    $("input[name='brand']:checked").each(function(e){
        console.log($(this).val())
    })
}

- 배열 사용

var len = $("input[name='brand']:checked").length;
var checkArr = [];
if(len > 1){ //개수를 체크하고 2개부터는 each함수를 통해 각각 가져온다.
    $("input[name='brand']:checked").each(function(e){
        var value = $(this).val();
        checkArr.push(value);        
    })
}

console.log(checkArr);

 

4) 강제 선택

$("input[name='checkBox의 name'][value='선택시킬 value값']").prop("checked", true);

 

5) 강제 선택

$("input[name='brand']").each(function(e){
    $(this).prop("checked", true);
});

 

전체 해제

$("input[name='brand']").each(function(e){
    $(this).prop("checked", false); //false는 해제된다.
})

 

 


https://myhappyman.tistory.com/91

 

jQuery - radio, checkBox값 가져오기, 선택하기, 제어 등

jQuery를 통해 radio, checkBox의 선택된 값을 가져오거나 강제로 선택되게 하는 방법을 알아보겠습니다. radio 제어 예제로 이러한 smartPhone.html 있다고 가정하고 진행하겠습니다. 스마트폰 통신사 : SKT

myhappyman.tistory.com

 

https://csslab.tistory.com/116

 

JQUERY 체크박스값 가져오기

checkbox checked 여부 : - id로 체크하는 경우 $('input:checkbox[id="checkbox_id"]').is(":checked") == true - name으로 체크하는 경우 $('input:checkbox[name="checkbox_name"]').is(":checked") == true -..

csslab.tistory.com