HTML DOM 入力チェックボックスの checked プロパティの使い方を解説
HTML DOM の checked プロパティは、HTML 内のチェックボックス（input type="checkbox"）における checked 属性の値を取得したり、変更したりするために使用されます。このプロパティを使うことで、JavaScript から動的にチェックボックスのオン・オフ状態を制御できます。
構文
checked プロパティの基本的な構文は以下のとおりです。
1. checked の値を取得する場合
object.checked
2. checked の値を設定（変更）する場合
object.checked = true|false
サンプルコード
ここでは、HTML DOM Input Checkbox の checked プロパティを使用した具体的な例を見ていきましょう。以下のコードでは、「Yes」ボタンをクリックするとチェックボックスにチェックが入り、「No」ボタンをクリックするとチェックが外れる仕組みを実装しています。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM checked property</title>
<style>
body{
text-align:center;
}
p{
font-size:1.5rem;
color:#ff8741;
}
input{
width:30px;
height:30px;
}
button{
background-color:#db133a;
color:#fff;
padding:8px;
border:none;
width:120px;
margin:0.5rem;
border-radius:50px;
outline:none;
}
</style>
</head>
<body>
<h1>checked Property Example</h1>
<p>Are you happy?</p>
<input type="checkbox">
<br>
<button onclick="yes()">Yes</button>
<button onclick="no()">No</button>
<script>
function yes() {
document.querySelector("input").checked = true;
}
function no() {
document.querySelector("input").checked = false;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
まず、「Yes」ボタンをクリックしてみましょう。クリックすると、チェックボックスにチェックが入ります。
次に、「No」ボタンをクリックすると、今度はチェックボックスのチェックが外れます。
まとめ
checked プロパティは、true を代入すればチェックボックスをチェック状態にし、false を代入すればチェックを外すことができる、シンプルながら非常に便利なプロパティです。フォームの初期値設定や、ユーザーの操作に応じた動的な UI 制御など、さまざまな場面で活用できますので、ぜひ覚えておきましょう。
-
HTML DOM 入力チェックボックスの disabled プロパティとは？使い方を徹底解説
HTML DOM の Input Checkbox（チェックボックス）の disabled プロパティは、チェックボックスを有効にするか無効にするかを設定・取得するためのプロパティです。この記事では、基本的な構文から実際のコード例まで、初心者にもわかりやすく解説します。基本情報disabled プロパティを使うことで、JavaScript から動的にチェックボックスの操作可否を切り替えることができます。たとえば、特定の条件が満たされるまでフォームの入力を禁止したい場合などに活用できます。構文disabled プロパティの構文は以下の通りです。値の取得（ブール値を返す）inputCheckbox
-
HTML DOM Input Radio checkedプロパティの使い方を徹底解説
HTML DOM の Input Radio checked プロパティは、type 属性が「radio」に設定された <input> 要素の checked プロパティに関連付けられています。このプロパティを使用することで、ラジオボタンの checked 属性値を設定（選択状態にする）したり、現在の選択状態を取得したりすることができます。構文checked プロパティを設定する場合の構文は以下の通りです。radioObject.checked = true|falsetrue を設定すると、ラジオボタンが選択された状態になります。false を設定すると、ラジオボタンの選択が解除