ラジオボタンをクリックすると、関数を呼び出す

投稿日: 2013年2月18日作成者: alphasis

ラジオボタンクリックで、JavaScriptの関数を呼び出すサンプル。

構文

<input type="radio" onclick="呼び出す関数名()" />

実装例

サンプル

赤色緑色青色

ソースコード

JavaScript

<script type="text/javascript">
function funcRed() {
document.getElementById( "sample" ).style.backgroundColor = 'red';
}
function funcGreen() {
document.getElementById( "sample" ).style.backgroundColor = 'green';
}
function funcBlue() {
document.getElementById( "sample" ).style.backgroundColor = 'blue';
}
</script>

HTML

<div id="sample">サンプル</div>
<div id="sampleButton">
<input type="radio" id="radio1" name="radio" onclick="funcRed()" /><label for="radio1" style="color: red;">赤色</label>
<input type="radio" id="radio2" name="radio" onclick="funcGreen()" checked="checked" /><label for="radio2" style="color: green;">緑色</label>
<input type="radio" id="radio3" name="radio" onclick="funcBlue()" /><label for="radio3" style="color: blue;">青色</label>
</div>

CSS

<style type="text/css">
#sample {
width: 300px;
padding: 50px;
background-color: green;
color: white;
text-align: center;
border-radius: 10px;
}
#sampleButton {
width: 400px;
margin-top: 5px;
text-align: center;
}
#sampleButton label{
font-size: 16px;
color: black;
font-weight: bold;
margin-right: 5px;
}
</style>

カテゴリー: JavaScript, イベントパーマリンク