목차

jQuery input checkbox checked

  • description : jQuery input checkbox checked
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2022-12-23 Fri

jQuery Input Checkbox checked

input type=“checkbox”의 상태(checkec) 표시

1. jsp

<input class="star importantMark" type="checkbox" name="checklistItemCheckBox">


2. 상기 체크박스를 클릭했을 때, 상태값(checked)을 확인한 후 checked 속성 추가하기

$('div#checklistAddModal input.star.importantMark').click(function() {
 
    // 1. 별 아이콘 클릭 시
    // 2. 체크상태(true)가 되면, checked = !(true) = false, !checked = true가 되어 Browser Dev Console의 Element에 checked="checked" 속성이 삽입됨.
    // 3. 비체크상태(false)가 되면, checked = !(false) = true, !checked = false가 되어 checked="checked" 속성이 사라짐
 
    // 방법 1. jQuery .is() 메소드로 checked 확인 및 .attr() 메소드로 속성 부여
    let checked = !$(this).is(':checked');
    $(this).attr('checked', !checked);
 
    // 방법 2. jQuery .attr() 메소드로 checked 확인 및 속성 부여
    let checked = !($(this).attr('checked'));
    $(this).attr('checked', checked);
 
    // 방법 3. jQuery .attr() 메소드로 checked 확인 & 삼항연산자로 속성 부여
    let checked = !($(this).attr('checked'));
    (checked) ? $(this).attr('checked', true) : $(this).attr('checked', false);
};


상기 코드에서 삼항 연산자를 사용하여 진행함
if 구문으로는 클릭했을 때 checked 속성이 삽입되지만, 다시 클릭하여 별 아이콘에 컬러가 사라져도 checked 속성은 그대로 남아있음(개인적으로 원인 파악하지 못함)
아이콘 선택 이전 상태 아이콘을 선택한 상태
업무 프로세스 등록 모달은 jsp에 작성된 '추가'버튼을 클릭하여 표시됨.

업무 프로세스 수정&삭제 모달은 jsp에 작성된 업무 프로세스 각각의 목록에 마우스 오버 시 표시되는 아이콘($('form#checklistForm i.fa-pen')을 클릭하면 표시된다.
이 버튼을 클릭하면 페이징이 동작한다(? 어디에서 설정을 한건지 확인할 것)

[jQuery]Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)
Check if checkbox is NOT checked on click - jQuery