====== jQuery input checkbox checked  ======
<WRAP left notice 80%>
  * description : jQuery input checkbox checked
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2022-12-23 Fri
</WRAP>
<WRAP clear></WRAP>

===== jQuery Input Checkbox checked =====
input type="checkbox"의 상태(checkec) 표시\\
\\
1. jsp\\
<code html>
<input class="star importantMark" type="checkbox" name="checklistItemCheckBox">
</code>
\\
2. 상기 체크박스를 클릭했을 때, 상태값(checked)을 확인한 후 checked 속성 추가하기\\
<code jquery>
$('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);
};
</code>
\\
상기 코드에서 삼항 연산자를 사용하여 진행함\\
if 구문으로는 클릭했을 때 checked 속성이 삽입되지만, 다시 클릭하여 별 아이콘에 컬러가 사라져도 checked 속성은 그대로 남아있음(개인적으로 원인 파악하지 못함)\\
{{:wiki:javascript:jquery:jquery_note:2022-12-23-checkbox선택이전.png?600|아이콘 선택 이전 상태}}
{{:wiki:javascript:jquery:jquery_note:2022-12-23-checkbox선택이후.png?600|아이콘을 선택한 상태}}
\\
업무 프로세스 등록 모달은 jsp에 작성된 '추가'버튼을 클릭하여 표시됨.\\
\\
업무 프로세스 수정&삭제 모달은 jsp에 작성된 업무 프로세스 각각의 목록에 마우스 오버 시 표시되는 아이콘($('form#checklistForm i.fa-pen')을 클릭하면 표시된다.\\
이 버튼을 클릭하면 페이징이 동작한다(? 어디에서 설정을 한건지 확인할 것)


===== Ref Link =====
[[https://ming9mon.tistory.com/149|[jQuery]Checkbox 컨트롤 (체크, 체크여부, 전체체크 등)]]\\
[[https://stackoverflow.com/questions/11159221/check-if-checkbox-is-not-checked-on-click-jquery|Check if checkbox is NOT checked on click - jQuery]]\\



{{tag> 오션 jQuery input checkbox checked}}