*

jqueryを使用したチェックボックスの一括選択・一括解除

   

またチェックボックスネタで恐縮なんですが、jqueryでの書き方が分かりやすかったのでメモです。

check_all

スポンサードリンク

地域選択とかでよく使いそうなやつです。
チェックボックス一括選択のサンプル

※CSSなどは前回の分を使いまわしてます。

<div id="#wrapper">
	<ul>
		<li>
			<input type="checkbox" name="fukuoka_all" id="fukuoka_all" class="allFukuoka">
			<label for="fukuoka_all">福岡市</label>
		</li>
		<li>
			<input type="checkbox" name="higashiku" id="higashiku" class="checkFukuoka">
			<label for="higashiku">東区</label>
		</li>
		<li>
			<input type="checkbox" name="hakataku" id="hakataku" class="checkFukuoka">
			<label for="hakataku">博多区</label>
		</li>
		<li>
			<input type="checkbox" name="chuouku" id="chuouku" class="checkFukuoka">
			<label for="chuouku">中央区</label>
		</li>
		<li>
			<input type="checkbox" name="minamiku" id="minamiku" class="checkFukuoka">
			<label for="minamiku">南区</label>
		</li>
		<li>
			<input type="checkbox" name="nishiku" id="nishiku" class="checkFukuoka">
			<label for="nishiku">西区</label>
		</li>
		<li>
			<input type="checkbox" name="jonanku" id="jonanku" class="checkFukuoka">
			<label for="jonanku">城南区</label>
		</li>
		<li>
			<input type="checkbox" name="sawaraku" id="sawaraku" class="checkFukuoka">
			<label for="sawaraku">早良区</label>
		</li>
	</ul>
</div>
$(function(){
	$('.allFukuoka').on('change', function() {
		$('input[class=checkFukuoka]').prop('checked', this.checked);
	});
});

jqueryも相変わらず緩くしか理解してないので「attr」と「prop」の違いがよくわかってなかったのですが、こちらで詳しく解説してくれてました↓
jQueryにおけるattrとpropの違いと使いドコロまとめ

「attr」:属性における値 を取得
「prop」:checkedという プロパティの真偽 を取得

inputを使用するときは「prop」と憶えてた方がよいみたい。

 -iPhone, Web

Sponsored link

Sponsored link

  関連記事

iOS8で閲覧すると、aタグがついてる画像にzoomプロパティが効いてない

しばらくOSのアップデートは様子見しておこうかと思ってたのですが、色々面倒になったのでアップデートしました。 ぼちぼち巷

CPIサーバで、htaccessに「mod_rewrite」を使用する場合のルール

しばらくハマってしまって、時間くってしまったので自分のためのメモです。 wordpressなどのCMSをインストールした

気軽にブログを始めるなら「Google Blogger」もありかも→配布テーマも意外とあるよ

「Google Blogger」って、一時期やたら聞いてた単語でしたが、今ってどれくらい普及してるんでしょうか? 最近ち

よく使いそうなCSS3のlinear-gradientの指定を整理してみた(2015年3月)

CSS3のグラデーションについて、結局どこまで指定したらいいのかわからなくなるので一旦自分用に整理しておきます。

no image

今更ながらのZen-Coding

もう半年前くらいに盛り上がってたような気がする「Zen-Coding」。 すんごい今更入れてみました。 macなら「Co

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ