*

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

  関連記事

no image

Googlemapにリンクするときのパラメータ(2014年8月)

以前「Googlemapにリンクするときによく使いそうなパラメータ」って記事を投稿しましたけど、そういえばあれからパラメ

キーボードショートカット

Dreamweaver8でZen-codingを使えるように設定する

会社のソフトがDreamweaver8で、てっきりCS3以降のものしかZen-coding対応してないものだと思ってたら

紫陽花

新しい環境でまずインストールするソフトとかアドオンとかのまとめ

自分がそのうち利用するであろうエントリーです(汗) 【ブラウザ】 Firefox Chrome Safari ie te

アナリティクスにフィルタを設置したらレポートに表示されるURLも変わって焦った話

この前のブロック後の処理からしばらく放置してたんですが、久しぶりにここ1ヶ月のアナリティクスを確認したら変なことになって

no image

野菜シスターズ

野菜一日これ一本 うわ〜AKB48。 やっぱこの人ら影響力あるんですね。

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

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