ページ読み込み時に、特定のラジオボタンをクリック

ページ読み込み時に、特定のラジオボタンをクリックした状態にするサンプル。

構文

window.onload = function () { // ページ読み込み時に実行する無名関数
    document.getElementById( "クリックさせたいラジオボタンのID" ).click();
}

実装例

サンプル

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "radio2" ).click();
}
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()" /><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;
    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, イベント パーマリンク