JavaScript PR

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

記事内に商品プロモーションを含む場合があります

jQueryの.attr()と.removeAttr()を使用して複数のcheckbox(チェックボックス)のチェック・解除を制御する方法をご紹介します。

CSSの記述

※必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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>

.attr()と.removeAttr()を使用して複数のcheckbox(チェックボックス)のチェック・解除を制御するJavaScritpの記述

※jquery.min.jsファイルを読み込みます。checkbox(チェックボックス)のチェック・解除を行うfncchk()関数でパラメータにより.attr()でチェック、.removeAttr()でチェック解除を行います。

<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>

チェックボックスのチェック・解除を制御するHTMLの記述

※複数のcheckbox(チェックボックス)を用意します。buttonタグに「onClick=”fncchk(‘on’)”」でチェック処理、「onClick=”fncchk(‘off’)”」でチェック解除処理を行う記述を追記します。

<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>

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

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

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

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。