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 속성은 그대로 남아있음(개인적으로 원인 파악하지 못함)