jQueryを使ったWebフォームの折りたたみについて

admin

11年前

商品購入フォームなどで商品を１つでも選択したら、個人情報を入力したいと思って作ってみました。
チェックボックスが一つだけで表示・非表示を切り替えるならtoggleSlide()の方が簡単です。
「複数のチェックボックスのどれもチェックされてなかったら非表示。１つ以上チェックされていれば表示」という仕様なら以下のようにします。

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'&gt; &lt;/script&gt;
&lt;script&gt;

	$(function() {
		//最初は隠しておく
		$(&quot;#content_box&quot;).hide();
		//チェックボックスのどれかがクリックされたら
		$('.check_group').click(function() {
		
			//１つもチェックされていなかったら
			if( $(&quot;.check_group:checked&quot;).length === 0 ) {
				$(&quot;#content_box&quot;).slideUp(&quot;slow&quot;);　//非表示にする
			} else {						
			   $(&quot;#content_box&quot;).slideDown(&quot;fast&quot;); //表示させる
			}
		});
	});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;check_group&quot;&gt;商品その１&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;check_group&quot;&gt;商品その２&lt;/label&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; class=&quot;check_group&quot;&gt;商品その２&lt;/label&gt;
&lt;div id=&quot;content_box&quot;&gt;formの要素&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

$(function() {

//最初は隠しておく

$("#content_box").hide();

//チェックボックスのどれかがクリックされたら

$('.check_group').click(function() {

//１つもチェックされていなかったら

if( $(".check_group:checked").length === 0 ) {

$("#content_box").slideUp("slow");　//非表示にする

} else {

$("#content_box").slideDown("fast"); //表示させる

}

});

</script>

</head>

<body>

<div id="content_box">formの要素</div>

</body>

</html>

関連記事