HTMLでデフォルトでラジオボタンを選択する：checked属性、JavaScript、CSSを使った方法
2024-04-02
HTMLでデフォルトでラジオボタンを選択する方法
checked属性は、ラジオボタンがデフォルトで選択されているかどうかを指定します。この属性をinput要素に追加することで、そのラジオボタンがデフォルトで選択されます。
<input type="radio" name="gender" value="male" checked> 男性
<input type="radio" name="gender" value="female"> 女性
value属性とJavaScriptを使う
value属性は、ラジオボタンの値を指定します。JavaScriptを使って、value属性が一致するラジオボタンを選択することができます。
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
<script>
const gender = document.querySelector('input[name="gender"][value="male"]');
gender.checked = true;
</script>
- 多くのラジオボタンがある場合は、
checked属性を使う方が簡単です。 - 動的にラジオボタンを選択する必要がある場合は、JavaScriptを使う必要があります。
- ラジオボタンのグループ名は、
name属性で指定します。 - ラジオボタンのラベルは、
label要素を使って指定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>デフォルトでラジオボタンを選択する</title>
</head>
<body>
<h1>性別</h1>
<input type="radio" name="gender" value="male" checked> 男性
<input type="radio" name="gender" value="female"> 女性
<script>
const gender = document.querySelector('input[name="gender"][value="male"]');
gender.checked = true;
</script>
</body>
</html>
このコードを実行すると、デフォルトで「男性」ラジオボタンが選択されます。
HTMLでデフォルトでラジオボタンを選択する他の方法
defaultChecked属性は、HTML5で導入された属性です。この属性をinput要素に追加することで、そのラジオボタンがデフォルトで選択されます。
<input type="radio" name="gender" value="male" defaultChecked> 男性
<input type="radio" name="gender" value="female"> 女性
checked属性とdefaultChecked属性は同じように機能しますが、defaultChecked属性はHTML5で推奨されています。
CSSを使って、ラジオボタンの初期状態をスタイル設定することもできます。
input[type="radio"]:checked {
background-color: red;
}
このコードは、デフォルトで選択されているラジオボタンの背景色を赤に設定します。
JavaScriptを使って、ラジオボタンをプログラムで選択することもできます。
const gender = document.querySelector('input[name="gender"][value="male"]');
gender.checked = true;
このコードは、「男性」ラジオボタンをデフォルトで選択します。
- ラジオボタンの初期状態をスタイル設定したい場合は、CSSを使うことができます。
html radio-button
