반응형
html radio value 값 가져오기
- radio value 값 가져오기
- javascript radio checked value 가져오기
- JavaScript radio checked
- JavaScript radio checked 변경
- JavaScript radio checked 여부
- JavaScript radio checked 제어
- javascript radio checked value 가져오기
- jquery radio checked value
- jquery radio checked 값 가져오기
radio 값 가져오기 html
- 아래 코드는 두 가지 방식(순수 JavaScript와 jQuery)을 사용하여 라디오 버튼에서 선택된 값을 읽고 결과를 표시하는 예시입니다.
<html>
<head>
<title>radio 값 가져오기</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// javascript
btnRadio = function () {
const selected = document.querySelector('input[name="radDay"]:checked');
if (selected) {
document.getElementById("result").textContent = "Selected: " + selected.value;
} else {
document.getElementById("result").textContent = "No option selected";
}
}
// jquery
btnRadioJquery = function () {
var selectedValue = $('input[name="radDay"]:checked').val();
if (selectedValue) {
$('#result').text("Selected: " + selectedValue);
} else {
$('#result').text("No option selected");
}
}
</script>
</head>
<body>
<form>
<input type="radio" id="rad0" name="radDay" value="0" /><label for="rad0">일</label>
<input type="radio" id="rad1" name="radDay" value="1" /><label for="rad1">월</label>
<input type="radio" id="rad2" name="radDay" value="2" /><label for="rad2">화</label>
<input type="radio" id="rad3" name="radDay" value="3" /><label for="rad3">수</label>
<input type="radio" id="rad4" name="radDay" value="4" /><label for="rad4">목</label>
<input type="radio" id="rad5" name="radDay" value="5" /><label for="rad5">금</label>
<input type="radio" id="rad6" name="radDay" value="6" /><label for="rad6">토</label>
<br />
<button onclick="btnRadio(); return false;">javascript radio 값 가져오기</button>
<button onclick="btnRadioJquery(); return false;">jquery radio 값 가져오기</button>
<p id="result"></p>
</form>
</body>
</html>
JavaScript 코드 설명
- document.querySelector('input [name="radDay"]:checked'):
- 이 코드는 페이지 내에서 name 속성이 "radDay"인 라디오 버튼 중 선택된(checked) 요소를 찾습니다.
- querySelector는 첫 번째로 일치하는 요소 하나만 반환합니다.
- selected 변수:
- 선택된 라디오 버튼 요소를 담고 있습니다.
- 만약 선택된 버튼이 없으면 null을 반환합니다.
- if (selected):
- 선택된 라디오 버튼이 있는 경우, 해당 버튼의 value 값을 읽습니다.
- document.getElementById("result"). textContent:
- 이 코드를 통해 id가 "result"인 요소의 텍스트 내용을 "Selected: " + 선택된 값으로 업데이트합니다.
- else:
- 라디오 버튼이 선택되지 않았을 경우 "No option selected"라는 메시지를 표시합니다.
jQuery 코드 설명
- $('input [name="radDay"]:checked'). val():
- 이 jQuery 코드는 name 속성이 "radDay"인 라디오 버튼 중 선택된 요소의 값을 가져옵니다.
- . val() 메서드는 선택된 요소의 value 값을 반환합니다.
- 만약 선택된 라디오 버튼이 없으면 undefined가 반환됩니다.
- if (selectedValue):
- 선택된 라디오 버튼이 있을 경우, 해당 value 값을 사용하여 결과를 표시합니다.
- $('#result'). text():
- id가 "result"인 요소의 텍스트를 업데이트하는 jQuery 메서드입니다. 선택된 값이 있을 경우 "Selected: " + 선택된 값을 표시하고, 없을 경우 "No option selected"라는 메시지를 출력합니다.
반응형
'dev > jquery' 카테고리의 다른 글
| html checkbox 값 설정 (0) | 2024.09.22 |
|---|---|
| html checkbox value 값 가져오기 (0) | 2024.09.22 |
| html radio,checkbox label 클릭 (0) | 2024.09.17 |
| html radio 값 설정 (0) | 2024.09.17 |
| $(function() $(document).ready(function() (0) | 2024.04.25 |
