jQuery vs JavaScript vs HTML: チェックボックスの「checked」属性を設定する方法

jQueryを使用すると、チェックボックスの「checked」属性を簡単に設定することができます。

方法

以下の2つの方法があります。

prop()メソッドを使用する

// チェックボックスにチェックを入れる
$('input[type="checkbox"]').prop('checked', true);

// チェックボックスのチェックを外す
$('input[type="checkbox"]').prop('checked', false);

// チェックボックスにチェックを入れる
$('input[type="checkbox"]').attr('checked', 'checked');

// チェックボックスのチェックを外す
$('input[type="checkbox"]').removeAttr('checked');

それぞれの方法の詳細

prop()メソッドは、要素のプロパティを取得または設定するために使用されます。

checked属性は、チェックボックスが選択されているかどうかを示すプロパティです。

prop()メソッドにtrueを渡すと、チェックボックスが選択された状態になります。

どちらの方法を使用しても同じ結果になりますが、prop()メソッドの方がパフォーマンスが優れていると言われています。

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">

<script>
// チェックボックス1にチェックを入れる
$('#checkbox1').prop('checked', true);

// チェックボックス2のチェックを外す
$('#checkbox2').prop('checked', false);
</script>

• チェックボックスの状態を取得するには、prop()メソッドまたはattr()メソッドに'checked'を渡します。

// チェックボックス1が選択されているかどうかを取得
var isChecked = $('#checkbox1').prop('checked');

• チェックボックスの状態が変更されたときにイベントが発生するよう、changeイベントをリッスンすることができます。

$('#checkbox1').change(function() {
  // チェックボックスの状態が変更されたときの処理
});

HTMLコード

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">

<button id="button1">チェックボックス1にチェックを入れる</button>
<button id="button2">チェックボックス2のチェックを外す</button>

JavaScriptコード

// ボタン1がクリックされたとき
$('#button1').click(function() {
  // チェックボックス1にチェックを入れる
  $('#checkbox1').prop('checked', true);
});

// ボタン2がクリックされたとき
$('#button2').click(function() {
  // チェックボックス2のチェックを外す
  $('#checkbox2').prop('checked', false);
});

動作

• ボタン1をクリックすると、チェックボックス1にチェックが入ります。

解説

• $('#button1').click(function() { ... })：ボタン1がクリックされたときに、function内の処理が実行されます。
• $('#checkbox1').prop('checked', true)：チェックボックス1の「checked」属性をtrueに設定します。

// チェックボックス1が選択されているかどうかを取得
var isChecked = $('#checkbox1').prop('checked');

$('#checkbox1').change(function() {
  // チェックボックスの状態が変更されたときの処理
});

チェックボックスの「checked」属性を設定する他の方法

JavaScriptのネイティブな方法

// チェックボックス1にチェックを入れる
document.getElementById('checkbox1').checked = true;

// チェックボックス2のチェックを外す
document.getElementById('checkbox2').checked = false;

HTMLの属性

<input type="checkbox" id="checkbox1" checked>
<input type="checkbox" id="checkbox2">

JavaScriptのネイティブな方法では、checkedプロパティを使用してチェックボックスの状態を設定することができます。

どの方法を使用しても同じ結果になりますが、jQueryを使用する方がコードが簡潔になり、読みやすくなります。

<input type="checkbox" id="checkbox1">
<input type="checkbox" id="checkbox2">

<button id="button1">チェックボックス1にチェックを入れる</button>
<button id="button2">チェックボックス2のチェックを外す</button>

// ボタン1がクリックされたとき
$('#button1').click(function() {
  // チェックボックス1にチェックを入れる
  document.getElementById('checkbox1').checked = true;
});

// ボタン2がクリックされたとき
$('#button2').click(function() {
  // チェックボックス2のチェックを外す
  document.getElementById('checkbox2').checked = false;
});

• document.getElementById('checkbox1').checked = true：チェックボックス1の「checked」プロパティをtrueに設定します。

• チェックボックスの状態を取得するには、checkedプロパティを取得します。

// チェックボックス1が選択されているかどうかを取得
var isChecked = document.getElementById('checkbox1').checked;

$('#checkbox1').change(function() {
  // チェックボックスの状態が変更されたときの処理
});