반응형
이번 포스팅에서는 vue js로 radio 버튼의 checked(selected) 값을 가져오는 방법에 대해서 알아보겠습니다.
클라이언트단에서 사용자가 라디오 버튼을 눌렀을때 어떤 값이 눌렸는지 다음과 같은 방식으로 알 수 있습니다.
Vue Javascript
var selected = event.target.value;
전체 코드를 보면 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<div id="app" v-cloak>
<input type="radio" name="radioBtn" id="r1" @change="radioChange($event)" value="첫번째 버튼">
<label for="r1">첫번째</label>
<input type="radio" name="radioBtn" id="r2" @change="radioChange($event)" value="두번째 버튼">
<label for="r2">두번째</label>
<input type="radio" name="radioBtn" id="r3" @change="radioChange($event)" value="세번째 버튼">
<label for="r3">세번재</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
methods: {
radioChange(event){
var selected = event.target.value;
console.log("selected : ", selected);
}
}
});
</script>
</body>
</html>
vue의 @change를 사용해서 $event를 인자로 하여 함수를 호출합니다.
이 함수에서 event.target.value 를 하면 매우 간단하게 내가 클릭한 라디오 버튼의 값을 가져올 수 있습니다. 다음은 콘솔 창에 출력된 value 들입니다.
Javscript
순수히 자바스크립트만 사용할 경우에는 다음과 같이 코드를 써주면 됩니다.
document.querySelector('input[name="radioBtn"]:checked').value
전체 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<div>
<input type="radio" name="radioBtn" id="r1" onclick="radioChange()" value="첫번째 버튼">
<label for="r1">첫번째</label>
<input type="radio" name="radioBtn" id="r2" onclick="radioChange()" value="두번째 버튼">
<label for="r2">두번째</label>
<input type="radio" name="radioBtn" id="r3" onclick="radioChange()" value="세번째 버튼">
<label for="r3">세번재</label>
</div>
<script>
function radioChange(event){
var selected = document.querySelector('input[name="radioBtn"]:checked').value
console.log("순수 js selected : ", selected);
}
</script>
</body>
</html>
콜솔창 출력 결과는 다음과 같습니다.
반응형
'Frontend' 카테고리의 다른 글
| [React Native] 노마드 코더 React Native 무료 강의 내용 정리 #2 Weather App (0) | 2022.05.04 |
|---|---|
| [React Native] 노마드 코더 React Native 무료 강의 내용 정리 #1 Introduction (0) | 2022.05.03 |
| [JavaScript] 페이지 새로고침 하는법, 현재 페이지 refresh (0) | 2021.11.04 |
| [HTML] <a> tag download attribute not working, html a 태그 파일 다운로드 안됨 (0) | 2021.10.29 |
| [JavaScript/JQuery] script에서 라디오 버튼 체크 속성 변경하기 (0) | 2021.10.14 |
