JavaScript / li 태그를 활용한 라디오 버튼 직접 구현 1

라디오 버튼

• 사용자가 여러 개의 선택지 중 1개만 선택할 수 있다.
• 옵션 버튼으로 불리기도 한다.
• 사용자가 잘못된 여러 개의 옵션을 선택하지 못하도록 방지한다.

직접 구현한 라디오 버튼

아래의 버튼은 복지관에서 일하는 친구의 부탁으로 구현하게 됐는데요. 아래 사진을 보시면 설문조사를 하는 표입니다. 어르신들의 성별과 나이 등 여러 가지를 조사하고 남자 몇 명 여자 몇 명 나이대 등을 체크해서 합계와 퍼센트를 구하고 프린트가 가능하도록 하는 페이지를 구현하는 것입니다.

그래서 일반적인 라디오 버튼을 디자인해서 사용하려고 했지만 직접 구현해보고 싶어서 처음부터 하나하나 로직을 구현했습니다.

li태그 동그라미 숫자 적용

해당 코드는 다른 분이 작성한 코드를 활용했습니다. 여러가지를 많이 찾아봤지만 제가 원하는 방식으로 노출이 가능해서 위 코드를 적용시켰습니다. 처음에는 png이미지를 이용해서 ui를 구현하려고 했지만 css와 이미지 편집 부분이 시간적으로 오래 걸릴 것 같아서 아래 방식을 선택했습니다.

Javascript

const circled_symbol = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮'];
 
const ul_elements = document.getElementsByClassName('circled');
Array.prototype.forEach.call(ul_elements, (ul) => {
    let li_elements = ul.getElementsByTagName('li');
    Array.prototype.forEach.call(li_elements, (li, index) => {
        if (index < circled_symbol.length) {
            li.innerText = circled_symbol[index] + ' ' + li.innerText;
        }
    });
});

CSS

ul.circled-horizontal-left {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0px;
    padding-left: 2px;
}
 
ul.circled-horizontal-left > li {
    display: inline-block;
    list-style: none;
    margin: 1px 20px 1px 5px;
}

li태그 클릭 이벤트

li 태그 클릭은 Jquery를 사용해서 구현했습니다. 학원에서 JavaScript 보다는 Jquery를 많이 사용해서 좀 더 익숙해서 사용하게 됐어요. JavaScript와 Jquery는 많이 사용하지 않다보니 구글링을 많이 했습니다.

$(document).ready(function() {
    $("#page").on("click", "li", function() {
            console.log('들어왔니?');
    });
});

전체 코드

코드와 변수명이 동작만 할 수 있도록 작성하다보니 많이 TheLove습니다. 아직 값을 저장하는 로직도 없고 css 부분도 수정해야 해요. 동작만 되는 것을 우선으로 작성해서 코드를 보면서 이걸 왜 이렇게 라는 부분이 상당히 많습니다.

Javascript

const circled_symbol = ['①', '②', '③', '④', '⑤', '⑥', '⑦', '⑧', '⑨', '⑩', '⑪', '⑫', '⑬', '⑭', '⑮'];
 
const ul_elements = document.getElementsByClassName('circled');
Array.prototype.forEach.call(ul_elements, (ul) => {
    let li_elements = ul.getElementsByTagName('li');
    Array.prototype.forEach.call(li_elements, (li, index) => {
        if (index < circled_symbol.length) {
            li.innerText = circled_symbol[index] + ' ' + li.innerText;
        }
    });
});
 
$(document).ready(function () {
    let count = 0;
    $(".page").on("click", 'li', function () {
        this.className = 'a' + count++;
 
      	// 체크된 li 태그를 연속 클릭 시 체크 이미지가 증가되는 것을 방지
        if (this.children.length == 1) {
            let lng = this.children[0].className.length;
            let delClass = this.children[0].className.substring(8, lng)
            $('.'+delClass+'').remove()
        }
        //  li 태그에 이미지를 추가해서 동그라미 숫자 위에 체크 표시를 하기 위한 로직입니다.
        let imgTag = document.createElement('img');
        let clickLi = $(this);
        imgTag.setAttribute('src', '../static/image/ck.png');
        imgTag.setAttribute('class', 'checked ' + 'a' + count++)
        clickLi.append(imgTag);
 // 같은 영역에서 형제들 중 img 태그를 가지고 있으면 img태그를 지움
 let lis = clickLi.siblings();
        for (let i = 0; i < lis.length; i++) {
            if (lis[i].children.length == 1) {
                let alng = lis[i].children[0].className.length;
                let adelClass = lis[i].children[0].className.substring(8, alng)
                $('.'+adelClass+'').remove()
            }
        }
    });
});

CSS

ul.circled-horizontal-left {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    margin: 0px;
    padding-left: 2px;
}
 
ul.circled-horizontal-left > li {
    display: inline-block;
    list-style: none;
    margin: 1px 20px 1px 5px;
}
 
.checked {
    position: relative;
    text-align: center;
    width: 15px;
    right: 83%;
    bottom: 5px;
}

html

<div class="page" id="pdfArea">                
    <table class="table2">
        <colgroup>
            <col width="16%">
        </colgroup>
        <tbody>
            <tr>
                <th class="table-color">&nbsp;1. 성&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;별</th>
                <th>
                    <ul class="circled circled-horizontal-left">
                        <li>남자</li>
                        <li>여자</li>
                    </ul>
                </th>
            </tr>
            <tr>
                <th class="table-color">&nbsp;2. 연&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;령</th>
                <th>
                    <ul class="circled circled-horizontal-left">
                        <li>60세 미만</li>
                        <li>60~65세</li>
                        <li>66~70세</li>
                        <li>71~75세</li>
                        <li>76~80세</li>
                        <li>81~85세</li>
                        <li>86~90세</li>
                        <li>90세 이상</li>
                   </ul>
                </th>
            </tr>
        </tbody>
    </table>
</div>

---

출처

https://runspace.tistory.com/12
https://doctorson0309.tistory.com/165
https://6u2ni.tistory.com/33