위키
포럼
도구
바뀐글
랜덤

HTML 라디오 버튼 편집하기

경고: 로그인하지 않았습니다. 편집을 하면 IP 주소가 공개되게 됩니다. 로그인하거나 계정을 생성하면 편집자가 사용자 이름으로 기록되고, 다른 장점도 있습니다.

편집을 취소할 수 있습니다. 이 편집을 되돌리려면 아래의 바뀐 내용을 확인한 후 게시해주세요.

최신판 당신의 편집
8번째 줄: 8번째 줄:
==자바스크립트==
==자바스크립트==
{{참고|자바스크립트 라디오 버튼}}
{{참고|자바스크립트 라디오 버튼}}
<syntaxhighlight lang='html' run>
<source lang='html5'>
<tr>
  <td>
    <label>국가</label>
  </td>
  <td>
<label><input type='radio' name='fruit' value='apple' />사과</label>
<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='banana' />바나나</label>
<label><input type='radio' name='fruit' value='lemon' checked='checked' />레몬</label>
<label><input type='radio' name='fruit' value='lemon' checked='checked' />레몬</label>
<input type='button' value='선택된 항목 확인' onclick='show_checked();'/>
</td>


<script>
<script>
25번째 줄: 30번째 줄:
}
}
}
}
console.log( '선택된 항목 인덱스=', checked_index, '선택된 항목 값=', checked_value );
alert( '선택된 항목 인덱스: '+checked_index+'\n선택된 항목 값: '+checked_value );
}
}
</script>
</script>
</syntaxhighlight>
</source>
<jsfiddle>er8ne8yw</jsfiddle>


==jQuery==
==jQuery==
{{참고|jQuery 라디오 버튼}}
{{참고|jQuery 라디오 버튼}}
<syntaxhighlight lang='html' run>
<source lang='html5'>
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
$(function() {
$(function() {
     $("#btn-show-checked").click(function() {
     $("#btn-show-checked").click(function() {
         console.log( $("input[name=fruit]:checked").val() );
         alert( $("input[name=fruit]:checked").val() );
     });
     });
});
});
46번째 줄: 52번째 줄:
<label><input type='radio' name='fruit' value='lemon' />레몬</label>
<label><input type='radio' name='fruit' value='lemon' />레몬</label>
<button id='btn-show-checked'>선택된 항목 확인</button>
<button id='btn-show-checked'>선택된 항목 확인</button>
</syntaxhighlight>
</source>
<jsfiddle>vLyjbk0y</jsfiddle>


==PHP==
==PHP==
;radio_button.php
;radio_button.php
<syntaxhighlight lang='html5'>
<source lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
60번째 줄: 67번째 줄:
<input type='submit' value='제출' />
<input type='submit' value='제출' />
</form>
</form>
</syntaxhighlight>
</source>


;radio_button_ok.php
;radio_button_ok.php
<syntaxhighlight lang='php'>
<source lang='php'>
<?php
<?php
echo '<xmp>';
echo '<xmp>';
69번째 줄: 76번째 줄:
echo '</xmp>';
echo '</xmp>';
?>
?>
</syntaxhighlight>
</source>


;실행결과
;실행결과
*예제: http://zetawiki.com/ex/php/radio_button.php
*바나나를 선택하고 [제출] 누른 경우
*바나나를 선택하고 [제출] 누른 경우
<syntaxhighlight lang='text'>
<source lang='text'>
Array
Array
(
(
     [fruit] => banana
     [fruit] => banana
)
)
</syntaxhighlight>
</source>


==같이 보기==
==같이 보기==

제타위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포된다는 점을 유의해 주세요(자세한 내용에 대해서는 제타위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요.
또한, 직접 작성했거나 퍼블릭 도메인과 같은 자유 문서에서 가져왔다는 것을 보증해야 합니다. 저작권이 있는 내용을 허가 없이 저장하지 마세요!

취소 편집 도움말 (새 창에서 열림)

이 문서에서 사용한 틀:

원본 주소 "https://zetawiki.com/wiki/HTML_라디오_버튼"