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

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

Contents

CSSの記述
.attr()と.removeAttr()を使用して複数のcheckbox（チェックボックス）のチェック・解除を制御するJavaScritpの記述
チェックボックスのチェック・解除を制御するHTMLの記述
jQueryのattrとremoveAttrを使用し複数のcheckbox（チェックボックス）をチェック／解除するデモページ

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>

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