JavaScript로 radiobox value 구하기

JavaScript로 radiobox value 구하기

2023. 5. 23. 23:42ㆍFrontEnd/JavaScript

입사 2일차 애기(나)에게 미션이 떨어졌습니다

미션이 무엇이냐면 라디오박스의 체크 값을 post로 보내는 것!

간단해보이죠?

네 제가 보기에도 간단하더라구용!

근데 막상 하려니까 왜 멘붕인가요 물경력인가봅니다ㅠㅠ

그래도 value값을 구하고는 왔습니다만 퇴근하고도 넘 찝찝해서 한번 더 해보렵니다

그 얘기 들어보셨나요 내 코드는 운빨과,,,스택오버플로우와,,,어떤 블로그의 존나 옛날 글과 인도인이 올린 코딩 유투브의 집합체라는 얘기

radiobox value라고 유투브에 쳤더니 어떤 인도인이 react로 코드 짠게 나오지 뭡니까!! 근데 저는 퓨어로 짤 거라서 마크업만 훔쳤습니다

인도인 유투브보고 마크업한 5개의 라디오 버튼입니다!

버튼 체크 후 제출 버튼을 누르면 콘솔창에 값를 출력하는 코드를 짜보겠습니다

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <article>
    <p>radio box value test!</p>
    <input type="radio" name="fruit" value="grape" /> : grape
    <input type="radio" name="fruit" value="strawberry" /> : strawberry
    <input type="radio" name="fruit" value="grapefruit" /> : grapefruit
    <input type="radio" name="fruit" value="orange" /> : orange
    <input type="radio" name="fruit" value="lemon" /> : lemon

    <button class="test_btn">제출</button>
  </article>
  <script src="index.js"></script>
</body>

</html>

input의 type은 radio, name은 fruit입니다

나만 몰랐겠지만 모든 input의 name을 똑같이 설정해주어야 라디오박스의 다중선택을 막을 수 있습니다^^

const btn = document.querySelector('.test-btn');

먼저 변수를 설정해주었어요

btn.addEventListener('click', function () {
	const radioValue = {
		checked: document.querySelector('input[type=radio][name=fruit]:checked').value,
	}; 
  console.log(radioValue.checked);
});

radioValue에 체크값을 넣어주고 제출 버튼을 클릭할 때마다 radioValue object의 checked값이 찍히도록 버튼에 클릭 이벤트를 주었습니다.

클릭할 때마다 값이 변경되는 걸 확인할 수 있습니다

다시 해보니 넘 간단한데.....아까는 왤케 헤맸을까요....나는 진짜 말하는 감자야....

확실히 공부할 때랑 실무할 때랑 다른가봅니다 앞으로 더 열심히 해야지...진짜...!!!!!

저작자표시 비영리 변경금지

'FrontEnd > JavaScript' 카테고리의 다른 글

ResizeObserver로 resize 변화 감지하기 (0)	2023.08.08
[javascript] 쿠키에서 값 가져오기 (0)	2023.07.07
[javascript]본인 인증 구현 시 Failed to launch "" because the scheme does not have a registered handler 에러 (0)	2023.06.30
window.close()가 안될 때 (0)	2023.06.30
(Vanila Js) 연산자 오류 해결 (0)	2023.01.17

/🌼HaFE🌼/

/🌼HaFE🌼/

태그

최근글

댓글

공지사항

아카이브

'FrontEnd > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

/*🌼HaFE🌼*/

태그

최근글

댓글

공지사항

아카이브

'FrontEnd > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

/🌼HaFE🌼/