cheeckbox５項目くらい作成し、各項目にslidetoggleで詳細がでてくるような動きを作りたいのですが、複数だとうまくいきません。。単体ではできました。おそらくnextを使うかと思うのですが、どなたか教えて下さい＞＜ $(document).ready(function(){ $('#test').click(function() { $('#box').slideToggle(this.checked); }); }); test sample （※.box_001と同じものが続く。）

おしえて

Jquery cheeckbox（複数）とslidetoggle使用時のコードを教えて下さい＞＜

解決済

質問者：マスタードマスター
質問日時：2017/04/23 17:13
回答数：2件

cheeckbox５項目くらい作成し、各項目にslidetoggleで詳細がでてくるような動きを作りたいのですが、複数だとうまくいきません。。
単体ではできました。

おそらくnextを使うかと思うのですが、どなたか教えて下さい＞＜

<script>

$(document).ready(function(){
$('#test').click(function() {
$('#box').slideToggle(this.checked);
});
});
</script>

<body>

<div class="box_001">
<h1>test</h1>
<input type="checkbox" name="sample1" id="test" />
<label for="test"></label>
<img src ="../test/img/test_06.png" width="200" class="ttl_01" >
<div id="box">
<div class="imgBox1"><img src="../test/img/test_10.png" width="100" ></div>
<div class="textBox1">
<h2><img src="../test/img/test_06.png" width="300" class="ttl_03"></h2>
<p>sample</p>
</div>
</div>
</div>
（※.box_001と同じものが続く。）

通報する

この質問は特に20代・女性の方に
リクエストされています！
(回答を制限するものではありません。)

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2017/04/24 10:02

こんにちは

ご質問文では、要素のIDを利用して識別する方法で記述なさっていますが、その方法で複数の構成に対応したいのであれば、そのまま（同じ内容をコピーして）IDを変えた記述を必要なだけ行えば実現できます。

とはいえ、ほとんど同じ内容を何度も記述するのも非効率的なので、通常は、文書の構造や（複数設定可能な）クラスなどを利用することで、複数のセットに対応可能な記述にすることが多いです。（他にも方法はありますが）

文書構造がどの程度確定しているのか不明なので、以下はクラス名を利用した一例です。

※ ご質問の動作に直接関係のない要素は省略してあります。
※ label要素がfor属性でIDを利用する記述法になっていますが、それだとidを個別に割り当てる必要があるため、ひとまず、子要素に対象を包含させる記述方法に変えています。
※ ご提示のスクリプトでは、slideToggleの引数にthis.checkedを渡していますが、引数としての意味が不明なので外してあります。
（slideToggleの引数の意味はこちら↓）
http://api.jquery.com/slideToggle/

<script>
$(document).ready(function(){
$(".slide_wrap input[type='checkbox']").on("click", function(){
$(".slide_box", $(this).closest(".slide_wrap")).slideToggle();
});
});
</script>

<body>
<div class="slide_wrap">
<h1>タイトル？</h1>
<label><input type="checkbox" value="" />画像？</label>
<div class="slide_box">内容は省略</div>
</div>

<div class="slide_wrap">
<h1>タイトル？</h1>
<label><input type="checkbox" value="" />画像？</label>
<div class="slide_box">内容は省略</div>
</div>
</body>