.attr()と.removeAttr()でチェックボックスのチェック・解除を制御【jQuery】｜DAD UNION

この記事では、jQueryの.attr()と.removeAttr()を使って複数のチェックボックスを一括でチェック・解除する方法を解説します。チェックボックスの制御は、フォームの動作をカスタマイズしたい場合に頻繁に使用されるスクリプトです。jQueryを活用することで、シンプルかつ効率的に実装することができます。

Contents

CSSの記述
jQueryの.attr()と.removeAttr()でチェックボックスを制御する方法
HTMLの記述でチェックボックスの操作を実装
jQueryのattrとremoveAttrを使用し複数のcheckbox（チェックボックス）をチェック／解除するデモページ
応用例：カスタムチェックボックスの制御
まとめ

CSSの記述

まずはページ全体の見た目を整えるために、簡単なCSSを記述しましょう。必要に応じてカスタマイズしてください。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
-->
</style>

このCSSは、全体的なレイアウトのスタイリングとフォントの設定を行っています。#idWrapは中央揃えのためのコンテナで、チェックボックスとボタンを整然と配置するために使用します。

jQueryの.attr()と.removeAttr()でチェックボックスを制御する方法

次に、jquery.min.jsファイルを読み込みます。
JavaScript（jQuery）でチェックボックスのチェック状態を操作する関数を作成します。.attr()を使ってチェックボックスにチェックを入れ、.removeAttr()でチェックを解除します。jQueryのスクリプトを読み込むために、まずCDNからjQueryをインポートします。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
function fncchk(param){
	if(param=="on"){
		$('input[type="checkbox"]').attr("checked", true);
	}else{
		$('input[type="checkbox"]').removeAttr('checked');
	}
}
</script>

fncchkという関数では、paramの値に応じてチェックボックスを操作します。paramが”on”の場合、すべてのチェックボックスに.attr()でチェックを付け、”off”の場合には.removeAttr()を使ってチェックを外します。.attr()は要素に属性を設定する際に使用し、.removeAttr()は指定した属性を削除します。

HTMLの記述でチェックボックスの操作を実装

それでは、チェックボックスを用意し、ボタンをクリックして一括でチェック・解除を行えるHTMLを記述します。

<div id="idWrap">
	<h1>attrとremoveAttrを使用し、ボタンクリックで全てのチェックボックスを「チェック」／「解除」します。<br></h1>
<br />

	<div align="center">
    <input type="button" onClick="fncchk('on')" value="チェック" />　　<input type="button" onClick="fncchk('off')" value="解除" /><br /><br /><br />
<input type="checkbox" name="chk" value="1" />　
<input type="checkbox" name="chk" value="2" />　
<input type="checkbox" name="chk" value="3" />　
<input type="checkbox" name="chk" value="4" />
    </div>
</div>

ここでは、＜input type=”button”＞にonClickイベントを設定して、ボタンがクリックされたときにfncchk(‘on’)またはfncchk(‘off’)関数を呼び出すようにしています。複数のチェックボックスが用意されており、ボタンをクリックすることで一括でチェックをつけたり外したりできます。

jQueryのattrとremoveAttrを使用し複数のcheckbox（チェックボックス）をチェック／解除するデモページ

下記のリンクから、今回紹介したスクリプトを実際に動作確認できるデモページにアクセスできます。実際の動作を確認しながら、コードの理解を深めましょう。

jQueryのattrとremoveAttrを使用し複数のcheckbox（チェックボックス）をチェック／解除するデモ

チェックボックスの制御ってデフォルトのチェックボックスだったら良いのですが、jQueryとかでカスタム（デザイン）されたものは制御が異なるケースがあります。

応用例：カスタムチェックボックスの制御

チェックボックスは、フォームの操作を便利にするための基本的な要素です。しかし、実際のWebアプリケーション開発では、デザインをカスタマイズされたチェックボックスが使われることがよくあります。このようなカスタムデザインされたチェックボックスでは、デフォルトのチェックボックスとは異なる制御が必要となるケースがあるため注意が必要です。

たとえば、.addClass()や.removeClass()を使って、チェックボックスのデザインをカスタムクラスで変更する場合があります。以下のように、カスタムされたチェックボックスの状態を管理することもできます。

function fncchk(param) {
    if(param === "on") {
        $('input[type="checkbox"]').each(function() {
            $(this).attr("checked", true).addClass('checked-style');
        });
    } else {
        $('input[type="checkbox"]').each(function() {
            $(this).removeAttr('checked').removeClass('checked-style');
        });
    }
}

このコードでは、.addClass(‘checked-style’)と.removeClass(‘checked-style’)を使ってチェックボックスの見た目も変えることができます。カスタムデザインのチェックボックスの場合、このように状態をクラスで管理することで、チェック状態に応じて動的にデザインを変更することができます。