*

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

  関連記事

WordPressでプラグインなしでURLを指定してスクリーンショットを表示する方法

WordPressでスクリーンショットを表示させることって、ちょいちょいあります。 てっきりプラグインなのかと思ってまし

セカイカメラ

iPhoneアプリで面白そうなのがでてきたようなので試す。 セカイカメラてアプリ。 よくこんなん思いつくなと思っちゃいま

no image

30代なんで

何度見てもイラストが怖いAGA 30代の悩める気持ち なんのためのサイトかよくわからないが、とりあえずスクリーンセーバー

no image

パスコード画面でフリーズ(iPhone)

iPhoneが急に不調になりました。。 2日程前から急にメール入力してるときに固まって落ちたりしてたんですが、何度か再起

no image

Google Analyticsで自分のアクセスを除外する

今更ネタではあるかもしれませんが。 今までなんとなく知ってた方法は、 1)アナリティクスのフィルタで除外する方法。 参考

コメントを残す

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


*

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

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

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

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

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

実は先月で退職しました

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

  • Sorry. No data so far.

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