[방디] HTML 체크박스 다중선택 방지하기(radio / javascript 활용)

안녕하세요. 방디입니다.

 

최근 코딩 공부에 집중하면서 블로그에 조금 소홀해졌네요...

 

저는 최종 목표는 모바일 앱 만들기이지만, 우선 홈페이지 언어인 HTML, CSC, Javascript, PHP 등을 먼저 공부하고 있습니다.

실제로 홈페이지를 하나 제작하면서 HTML 체크박스를 활용하던 중, 다중선택을 방지하는 기능에서 제가 골머리를 앓았었기에 이를 다루어보고자 합니다.

---

1. Input type: radio 활용하기

첫 번째 방법은 <input> 태그에 기본적으로 내재되어 있는 radio 타입을 활용하는 것입니다.

우선 <input> 태그를 위와 같이 간단히 살펴보자면,

  1) type을 통해서 사용하고자 하는 목적에 맞추어 button, checkbox 등을 지정할 수 있고,

  2) name을 통해 이름을 부여할 수 있으며,

  3) value를 통해 input 태그의 속성을 부여할 수 있습니다.

<input type="checkbox" name="name1" value="value1">
<input type="checkbox" name="name2" value="value2">
<input type="checkbox" name="name3" value="value3">

하지만 위와 같이 type="checkbox"로 input을 사용한다면, 이 체크박스들은 서로 영향을 주지 않아서 다중선택을 허용하게 됩니다.

 

이럴 때 필요한 것이 바로 radio 타입입니다.

<input type="radio" name="name1" value="value1">
<input type="radio" name="name2" value="value2">
<input type="radio" name="name3" value="value3">

이렇게 type 부분에 radio를 주고 실행을 시키신다면, radio로 묶인 체크박스끼리는 다중선택이 되지 않도록 설정해줍니다.

 

하지만 제가 위에 적은 그대로 코드를 실행시키시면 radio 기능이 정상적으로 동작하지 않을 텐데요.

그 이유는 바로 name 때문입니다.

radio로 다중선택을 없애고 싶으시다면, 해당하는 input 태그들의 name을 동일하게 맞추어주셔야 합니다.

<input type="radio" name="name1" value="value1">
<input type="radio" name="name1" value="value2">
<input type="radio" name="name1" value="value3">

이렇게 코드를 실행시키신다면 name1이라는 이름을 가진 input 중에서는 한 가지만 선택이 가능하도록 설정됩니다.

name을 다르게 부여한다면 그 name끼리만 다중선택 방지가 작용하니 참고하여 활용하시기 바랍니다.

 

---

2. input의 id와 Javascript 함수 활용하기

하지만 만약, 다른 기능으로 인해 name을 동일하게 설정할 수 없는 경우에는 어떻게 할까요?

또는 이미 radio를 부여한 개체 중에서도 더 세부적으로 다중선택을 방지하고 싶을 땐 어떻게 할까요?

저는 input의 id와 Javascript 함수 기능을 통해 해결했습니다.

 

우선 아래와 같이 각각의 input 태그에 id를 부여해줍니다.

* id란, 한 문서 내에서 해당 태그 등이 가지는 고유한 이름입니다.

<input type="checkbox" name="name1" id="chk1" value="value1">
<input type="checkbox" name="name2" id="chk2" value="value2">
<input type="checkbox" name="name3" id="chk3" value="value3">

 

 

그리고 자바스크립트를 활용하여 함수를 만들어 줄 텐데요.

각 input의 id를 불러오는 변수를 설정한 후, 이 변수를 활용해 줄 겁니다.

<script>
const example1 = document.querySelector('#chk1');
const example2 = document.querySelector('#chk2');
const example3 = document.querySelector('#chk3');

function example_1() {
	if(example1.checked == true) {
    example2.checked = false;
    example3.checked = false;
    }
   }
function example_2() {
	if(example2.checked == true) {
    example1.checked = false;
    example3.checked = false;
    }
   }
function example_3() {
	if(example3.checked == true) {
    example1.checked = false;
    example2.checked = false;
    }
   }

const는 변수를 선언하는 부분입니다. 저는 example1, example2, example3이라는 세 변수를 설정해서 각각 id가 chk1, chk2, chk3인 것을 가져오는 기능을 넣었습니다.

(id 값을 querySelector로 불러오실 때는 앞에 #을 넣어주셔야 합니다.)

 

그 후, 함수 3개를 만들었는데요.

각각의 함수는 특정 체크박스가 체크되어 있는지를 확인한 후에, 만약 체크가 되어 있다면 다른 체크박스의 체크를 해제하는 기능을 넣어 두었습니다.

여기서 중요한 것은 if의 조건문 안에서는 ==으로 표시하시고, 밖에서는 = 하나로 표시하셔야 잘 동작합니다.

 

 

이제 아래와 같이 각각의 체크박스에 함수를 적용해줍니다.

<input type="checkbox" name="name1" id="chk1" value="value1" onClick="example_1();">
<input type="checkbox" name="name2" id="chk2" value="value2" onClick="example_2();">
<input type="checkbox" name="name3" id="chk3" value="value3" onClick="example_3();">

onClick 부분에 해당 함수를 넣어두면, 체크박스가 선택될 때 자동으로 함수를 실행시키게 됩니다.

따라서 chk1 체크박스를 체크하면, example_1 함수가 실행되어 chk1 박스가 체크되었는지를 확인하게 되고,

체크가 되었다는 것을 확인하면 자동으로 chk2, chk3 박스는 체크를 해제시키는 것입니다.

 

 

최종본은 아래와 같으니 필요하신 분은 참고해주세요.

<input type="checkbox" name="name1" id="chk1" value="value1" onClick="example_1();">
<input type="checkbox" name="name2" id="chk2" value="value2" onClick="example_2();">
<input type="checkbox" name="name3" id="chk3" value="value3" onClick="example_3();">



<script>
const example1 = document.querySelector('#chk1');
const example2 = document.querySelector('#chk2');
const example3 = document.querySelector('#chk3');

function example_1() {
if(example1.checked == true) {
    example2.checked = false;
    example3.checked = false;
    }
   }
function example_2() {
if(example2.checked == true) {
    example1.checked = false;
    example3.checked = false;
    }
   }
function example_3() {
if(example3.checked == true) {
    example1.checked = false;
    example2.checked = false;
    }
   }

---

저 역시 아직 코딩 새내기이기 때문에, 위에서 소개한 내용은 아마 크게 효율적이지는 않을 겁니다.

다만 제가 고심했던 부분이었고, 비슷한 고민을 가진 분들이 문제를 해결하시는 데 도움이 되실 듯 하여 올리게 되었습니다.

더 좋은 방법을 찾으셨다면 언제든 댓글 환영입니다.

 

감사합니다.

 

- 방디 -