jQuery - 체크박스(CheckBox) 사용

GARY·2022년 3월 31일
0

1. 체크된 value값 가져오기

//name 값으로 체크된 value 값 가져오기
$("input:radio[name='myName']:checked").val();

//id 값으로 체크된 value 값 가져오기
$("input:radio[id='myId']:checked").val();

2. 체크박스 선택하기

1> name으로 접근해서 속성 추가

//선택
$("input[name='myName']").prop("checked", true);
$("#myId").prop("checked", true);

// 해제
$("input[name='myName']").prop("checked", false);
$("#myId").prop("checked", false);

2> 해당 value 값 속성 추가

// 선택
$("input[name='myName'][value='checkValue']").prop("checked", true);

// 해제
$("input[name='myName'][value='checkValue']").prop("checked", false);

3. 체크 여부 확인하기

1> 단일 체크박스

//name 값으로 접근
if($("input:radio[name='myName']").is(":checked") == true){
    // 체크되었을때 실행
}

//id 값으로 접근
if($("#myId").is(":checked")){
    // 체크되었을때 실행
}

2> 다중 체크박스

//myName의 모든 체크박스 루프 -> 체크된 value 값 콘솔 표시
$("input[name='myName']").each(function(){
    if( $(this).is(":checked") == true ){
      var checkVal = $(this).val();
      console.log(checkVal);
    }
});

//myName의 체크박스 중 선택된 것들만 루프 -> 해당 value 값 콘솔 표시
$("input[name='myName']:checked").each(function() {
    var checkVal = $(this).val();
    console.log(checkVal);
});
profile
개발하는 개린이 개리

0개의 댓글

관련 채용 정보