"HTML 라디오 버튼"의 두 판 사이의 차이

 
(사용자 4명의 중간 판 42개는 보이지 않습니다)
1번째 줄: 1번째 줄:
;HTML RADIO button
{{다른뜻|라디오}}
;HTML radio tag, radio button
;HTML radio 태그
;HTML 라디오 버튼
;HTML 라디오 버튼
;HTML RADIO 버튼
;HTML RADIO 버튼
;라디오 버튼 선택 항목 값 보기
==자바스크립트==
{{참고|자바스크립트 라디오 버튼}}
<syntaxhighlight lang='html' run>
<label><input type='radio' name='fruit' value='apple' />사과</label>
<label><input type='radio' name='fruit' value='banana' />바나나</label>
<label><input type='radio' name='fruit' value='lemon' checked='checked' />레몬</label>
<input type='button' value='선택된 항목 확인' onclick='show_checked();'/>
<script>
function show_checked() {
var obj = document.getElementsByName('fruit');
var checked_index = -1;
var checked_value = '';
for( i=0; i<obj.length; i++ ) {
if(obj[i].checked) {
checked_index = i;
checked_value = obj[i].value;
}
}
console.log( '선택된 항목 인덱스=', checked_index, '선택된 항목 값=', checked_value );
}
</script>
</syntaxhighlight>
==jQuery==
{{참고|jQuery 라디오 버튼}}
<syntaxhighlight lang='html' run>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $("#btn-show-checked").click(function() {
        console.log( $("input[name=fruit]:checked").val() );
    });
});
</script>
<label><input type='radio' name='fruit' value='apple' />사과</label>
<label><input type='radio' name='fruit' value='banana' checked />바나나</label>
<label><input type='radio' name='fruit' value='lemon' />레몬</label>
<button id='btn-show-checked'>선택된 항목 확인</button>
</syntaxhighlight>


==PHP==
==PHP==
===radio_button.php===
;radio_button.php
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
<title>라디오 버튼</title>
<title>라디오 버튼</title>
<form method='post' action='radio_button_ok.php'>
<form method='post' action='radio_button_ok.php'>
<input TYPE='radio' id='r1' name='fruit' value='apple' />
<input TYPE='radio' id='r1' name='fruit' value='apple' /><label for='r1'>사과</label>
<label for='r1'>사과</label>
<input TYPE='radio' id='r2' name='fruit' value='banana' /><label for='r2'>바나나</label>
<input TYPE='radio' id='r2' name='fruit' value='banana' />
<input TYPE='radio' id='r3' name='fruit' value='lemon' checked='checked' /><label for='r3'>레몬</label>
<label for='r2'>바나나</label>
<input TYPE='radio' id='r3' name='fruit' value='lemon' checked='checked' />
<label for='r3'>레몬</label>
<input type='submit' value='제출' />
<input type='submit' value='제출' />
</form>
</form>
</source>
</syntaxhighlight>


===radio_button_ok.php===
;radio_button_ok.php
<source lang='php'>
<syntaxhighlight lang='php'>
<?php
<?php
echo '<xmp>';
echo '<xmp>';
27번째 줄: 69번째 줄:
echo '</xmp>';
echo '</xmp>';
?>
?>
</source>
</syntaxhighlight>
 
===예제===
*http://jmnote.com/php/radio_button.php


;실행결과
*바나나를 선택하고 [제출] 누른 경우
*바나나를 선택하고 [제출] 누른 경우
<source lang='text'>
<syntaxhighlight lang='text'>
Array
Array
(
(
     [fruit] => banana
     [fruit] => banana
)
)
</source>
</syntaxhighlight>


==같이 보기==
==같이 보기==
* [[HTML 라디오 버튼 LABEL 지정]]
* [[HTML 라디오 버튼 LABEL 지정]]
* [[jQuery UI 세그먼티드 버튼]]
* [[라디오 버튼]]


[[분류: input]]
[[분류:Input]]
[[분류: HTML]]
[[분류:Button]]
[[분류: PHP]]
[[분류:HTML]]
[[분류:JavaScript]]
[[분류:JQuery]]
[[분류:PHP]]
[[분류: 버튼]]

2021년 10월 14일 (목) 02:21 기준 최신판

  다른 뜻에 대해서는 라디오 문서를 참조하십시오.
HTML radio tag, radio button
HTML radio 태그
HTML 라디오 버튼
HTML RADIO 버튼
라디오 버튼 선택 항목 값 보기

1 자바스크립트[ | ]

<label><input type='radio' name='fruit' value='apple' />사과</label>
<label><input type='radio' name='fruit' value='banana' />바나나</label>
<label><input type='radio' name='fruit' value='lemon' checked='checked' />레몬</label>
<input type='button' value='선택된 항목 확인' onclick='show_checked();'/>

<script>
function show_checked() {
	var obj = document.getElementsByName('fruit');
	var checked_index = -1;
	var checked_value = '';
	for( i=0; i<obj.length; i++ ) {
		if(obj[i].checked) {
			checked_index = i;
			checked_value = obj[i].value;
		}
	}
	console.log( '선택된 항목 인덱스=', checked_index, '선택된 항목 값=', checked_value );
}
</script>

2 jQuery[ | ]

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
    $("#btn-show-checked").click(function() {
        console.log( $("input[name=fruit]:checked").val() );
    });
});
</script>

<label><input type='radio' name='fruit' value='apple' />사과</label>
<label><input type='radio' name='fruit' value='banana' checked />바나나</label>
<label><input type='radio' name='fruit' value='lemon' />레몬</label>
<button id='btn-show-checked'>선택된 항목 확인</button>

3 PHP[ | ]

radio_button.php
<!DOCTYPE html>
<meta charset="utf-8" />
<title>라디오 버튼</title>
<form method='post' action='radio_button_ok.php'>
<input TYPE='radio' id='r1' name='fruit' value='apple' /><label for='r1'>사과</label>
<input TYPE='radio' id='r2' name='fruit' value='banana' /><label for='r2'>바나나</label>
<input TYPE='radio' id='r3' name='fruit' value='lemon' checked='checked' /><label for='r3'>레몬</label>
<input type='submit' value='제출' />
</form>
radio_button_ok.php
<?php
echo '<xmp>';
print_r($_POST);
echo '</xmp>';
?>
실행결과
  • 바나나를 선택하고 [제출] 누른 경우
Array
(
    [fruit] => banana
)

4 같이 보기[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}