ページ読み込み時に、特定のラジオボタンをクリックした状態にするサンプル。
構文
window.onload = function () { // ページ読み込み時に実行する無名関数
document.getElementById( "クリックさせたいラジオボタンのID" ).click();
}
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>
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>
<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>
#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>