[C#] .NET MAUI Blazor - Javascript 삭선 처리하기

할일 목록

 

[임무완수 버튼]    --> 클릭시

[ ● ] 1. 하체 운동

[  ] 2. 식단

 

▼

[임무완수 버튼]    

[ ● ] 1. 하체 운동  --> 이렇게 만드는 코드

[  ] 2. 식단

 

 

* Point

  - checkbox 와 label 에 id 를 유사하게 부여한다.(유사하지 않아도 상관없음)

  - label 스타일 중 text-decoration 속성을 line-through 로 부여한다.

 

 

[HTML 영역]

 

[코드]

<h1>오늘 할 일</h1>
<p role="status">할 일 : <span id="taskCount">2</span> 개</p>

<button class="btn btn-primary" onclick="checkedTodoAttribute()">임무완수</button>

<div>
    <div>
        <input  type="checkbox" id="chk_01" name="chkBoxTodo"/>
        <label id="01">하체운동</label>
    </div>
    <div>
        <input type="checkbox" id="chk_02" name="chkBoxTodo" />
        <label id="02">식단</label>
    </div>
</div>

 

 

[Javascript 영역]

 

[코드]

<script type="text/javascript">

    /*
        checkedTodoAttribute
        - Todo 완료하면 삭선처리
    */
    function checkedTodoAttribute() 
    {
        var chkElements = document.getElementsByName("chkBoxTodo");   
        for (var i = 0; i < chkElements.length; i++) 
        {
            if (chkElements[i].checked) 
            {
                document.getElementById(chkElements[i].id.replace('chk_', '')).style.textDecoration = "line-through";
            }
            
        }
        
    }

</script>

 

 

[완료된 모습]

 

 

 

감사합니다.