본문 바로가기
Web Programming/Script

radio , checkbox , select 값을 Script로 가져오기

by hyeon-H 2021. 7. 12.
728x90
반응형

HTML에서 선택 태그인 라디오, 체크박스, 셀렉트 태그를 사용하고,
선택된 값을 script로 가져오는 방법입니다.

 

1. radio 값 가져오기

<input type="radio">의 name값은 동일하고, 스크립트에서는 :chedcked를 사용해 체크된 값만 가져온다.

.
.
.
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script>
	function checkradioFn(){
		var radioValue = "";
		var radioValue = $("input[name=radio]:checked").val();
		$("#view").empty();
		$("#view").append(radioValue);
	};
</script>
</head>
<body>

  <div style="margin:30px;">
      <input type="radio" name="radio" value="A">A 선택
      <input type="radio" name="radio" value="B">B 선택
      <input type="radio" name="radio" value="C">C 선택
  </div>
  <button type="button" onclick="checkradioFn()">확인</button>
  <div id="view"> </div>

</body>
</html>

 

2. checkbox 값 가져오기

<input type="checkbox">의 name값은 동일하며 script에서는 :checked를 사용하여 체크된 박스의 값을 가져오는데,
여러 항복이기 때문에 배열타입으로 push를 사용하여 값을 넣어준다.

.
.
.
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script>
	function checkboxFn(){
		var checkboxValue = [];
		$("input[name=checkbox]:checked").each(function(){
			checkboxValue.push($(this).val());
		});
		$("#view2").empty();
		$("#view2").append(checkboxValue);
	};
</script>
</head>
<body>
  <div style="margin:30px;">
    <input type="checkbox" name="checkbox" value="A">A 선택
    <input type="checkbox" name="checkbox" value="B">B 선택
    <input type="checkbox" name="checkbox" value="C">C 선택
  </div>
  <button type="button" onclick="checkboxFn()">확인</button>
  <div id="view2"> </div>
</body>
</html>

 

3. Selectbox 값 가져오기

<select>로 선택된 <option>의 value값을 가져오는 것이다.

.
.
.
<script type="text/javascript" src="./jquery-3.6.0.min.js"></script>
<script>
	function selectFn(){
		var selectValue = "";
		selectValue = $("select[name=select]").val();
		$("#view3").empty();
		$("#view3").append(selectValue);
	};
</script>
</head>
<body>
  <div style="margin:30px;">
      <select name="select" >
          <option value="A">A 선택</option>
          <option value="B">B 선택</option>
          <option value="C">C 선택</option>
      </select>
  </div>
  <button type="button" onclick="selectFn()">확인</button>
  <div id="view3"> </div>
</body>
</html>
728x90
반응형
저작자표시 변경금지

'Web Programming > Script' 카테고리의 다른 글

script에서 form을 submit 하는 방법  (0) 2021.07.13
엔터키로 검색 / 메소드 호출하기 / onkeypress , onkeydown  (0) 2021.07.06
JSP의 Session값 Ajax로 Controller에 보내기  (0) 2021.06.28

관련글

티스토리툴바