jQuery로 checkbox 값 가져오기 / 체크박스 value 변경하기

- checkbox 값 체크 여부 받아오기 -

체크박스는 토글 요소다.
체크가 되어 있거나, 되어 있지 않거나, 둘 중 하나다.
체크 여부는 checked 속성을 확인할 수 있다.
체크되어 있으면 checked 가 활성화돼 있고,
체크되어 있지 않으면 checked 속성이 없다.

jQuery를 활용하면 특정 체크박스가
체크되어 있는지 아닌지 여부를
손쉽게 확인할 수 있다.

 

> is() 함수 이용하기

const isChecked = $(item).find('input[name="isRefund"]').is(':checked');

is() 함수는 파라미터로 던져주는 
선택자, 함수, 요소 등에 부합하는 대상이 있다면
true를 반환하고, 없으면 false를 반환한다.

$(item).find('input[name="isRefund"]')

 

체크박스가 체크된 상태라면 checked 속성이 활성화되므로,
체크박스 요소 안에서 ':checked' 인지 확인하면
체크된 상태인지 아닌지 확인할 수 있다.

is() 함수는 아래처럼 활용할 수 있다.

if ( $( this ).is( ":first-child" ) ) {
    $( "p" ).text( "It's the first div." );
} 
if ( $( this ).is( ".blue,.red" ) ) {
    $( "p" ).text( "It's a blue or red div." );
} 
if ( $( this ).is( ":contains('Peter')" ) ) {
    $( "p" ).text( "It's Peter!" );
}

 

> prop() 함수 이용하기

prop() 함수를 이용해서 받아올 수도 있다.
prop() 함수 안에 속성의 키를 넣어주면
그 속성의 값을 얻어온다.

$(item).prop('id');     //id 속성의 값을 받아온다
$(item).prop('class');  //class 속성의 값을 받아온다
$(item).prop('row-num');    //row-num 속성의 값을 받아온다
$(item).prop('checked');    //checked 속성의 값을 받아온다
...

 

- checkbox 요소의 체크 상태 변경 -

prop() 함수는 또 다른 기능이 있다.
속성 값을 받아오는 것뿐만 아니라
값을 변경하는 것도 가능하다.

사용자 행동에 따라서 이벤트를 통해
체크박스의 체크 상태 값을 변경해야 할 때가 있다.

그럴 때는 앞에서 알아봤던 prop 함수에
파라미터를 하나 더 넣어주면 된다.
즉, 파라미터의 갯수에 따라서 기능이 바뀌는데,
하나만 넣어주면 그 값을 얻어오고,
두 개를 넣어주면 그 값을 변경한다.

$(item).prop('id', 'fruitOrange');  // id 속성의 값을 fruitOrange로 변경한다
$(item).prop('class', 'fruitName'); // class 속성의 값을 fruitName로 변경한다
$(item).prop('row-num', '21');  // row-num 속성의 값을 21로 변경한다
$(item).prop('checked', true);  // checked 속성의 값을 true로 변경한다. (파라미터의 자료형은 문자열이 아니라 boolean이라는 점에 유의하자.)
$(item).prop("checked", false); // checked 속성의 값을 false로 변경한다. (파라미터의 자료형은 문자열이 아니라 boolean이라는 점에 유의하자.)

 

- checkbox 값 토글 -

checkbox 의 값을 이벤트에 따라서 변경해야 할 때가 있다.
이때, true나 false로 못을 박는 게 아니라,
현재 상태에서 반대 값으로 바꿔줘야 할 때가 있다.
일일이 현재 값을 받아와서 그 반대 값을 넣어주기는 번거롭다.
대신 prop() 함수에서 두 번째 파라미터로 아래와 같은 함수를 넣어주면 된다.

$('input#check1').prop('checked', function(i, val){return !val;});

- disabled 에 적용 가능 -

'disabled' 속성도 checked와 마찬가지로 토글 속성이기 때문에
앞에서 살펴봤던 prop() 함수를 그대로 적용할 수 있다.

$(item).prop('disabled');   //disabled 속성의 값을 받아온다.
$(item).prop('disabled', true); //disabled 속성의 값을 true로 변경한다. (파라미터의 자료형은 문자열이 아니라 boolean이라는 점에 유의하자.)
$(item).prop("disabled", false); //disabled 속성의 값을 false 변경한다. (파라미터의 자료형은 문자열이 아니라 boolean이라는 점에 유의하자.)
$('input#check1').prop('disabled', function(i, val){return !val;}); //disabled 속성의 값을 현재 상태의 반대 값으로 변경한다

>참고 자료
https://api.jquery.com/prop/
https://api.jquery.com/is/

 

-220413