[JavaScript] checkbox 체크 확인, select, radio 값 가져오기

 

 

input 값이 변할 때마다 상태를 저장해야 했다.

입력값이 변할 때마다 작업을 해야하니 onChange 이벤트를 사용하고

이벤트가 발생할 때 changeHandler라는 이름의 함수를 만들어 등록하였다.

또한 이벤트가 발생했을 때의 값을 넘겨줘야 했다. (편의상 매개변수를 값만 넘겨주기로 가정)

 

checkbox

체크박스의 경우 체크를 하였는지 확인만 하면 되었다.

이때 e.target.checked로 체크여부를 진리값으로 줄 수 있었다. 

<input
	type="checkbox"
	id="test"
	name="test"
	onChange={(e) => changeHandler(e.target.checked)}
/>
<label for="test">name</label>

 

select

option value 속성에 각각 자신의 선택되었을 때의 값을 명시하였다.

그리고 e.target.value로 사용자가 선택한 값을 넘겨주었다.

 <select onChange={(e) => changeHandler(e.target.value)}>
	<option value="normal">일반모드</option>
	<option value="sleep">수면모드</option>
 </select>

 

radio

fieldset 태그는 form 요소들을 그룹으로 묶을 수 있는 태그이다.

legend 태그로 해당 그룹의 설명을 첨부할 수 있다.

또한 각각의 radio 요소가 그룹으로 묶이기 위해 name 속성의 값을 똑같이 설정한다.

select와 같이 e.target.value를 사용하여 value에 정의한 값을 넘겨줄 수 있다.

<fieldset onChange={(e) => changeHandler(e.target.value)}>
	<legend>확인했습니까?</legend>
	<label>
		<input
			type="radio"
			name="confirm"
			value="yes"
		/>
          예
	</label>
	<label>
		<input
 			type="radio"
			name="confirm"
			value="no"
		/>
          아니오
	</label>
<fieldset>