###目的
チェックボックスの切替をしたいのですが、複数の条件がぶつかってしまい、どうしてもうまくいきません。
次のHTMLで、「チェックが入った色を持つ果物を表示したい。」というのが目的です。
html
1<ul class="colorlist"> 2 <li> 3 <input id="red" class="check" name="chk_color" value="red" type="checkbox"> 4 <label for="red" class="check_label">red</label> 5 </li> 6 <li> 7 <input id="green" class="check" name="chk_color" value="green" type="checkbox"> 8 <label for="green" class="check_label">green</label> 9 </li> 10 <li> 11 <input id="yellow" class="check" name="chk_color" value="yellow" type="checkbox"> 12 <label for="yellow" class="check_label">yellow</label> 13 </li> 14</ul> 15 16<div class="fluits"> 17 <p class="ringo">リンゴ(red)(green)(yellow)</p> 18 <p class="mikan">ミカン(red)(yellow)</p> 19 <p class="budo">ブドウ(green)</p> 20</div>
###やってみたこと
次のように書くと近いです。が、
greenのチェックを消すと、リンゴが消えてしまいます。
リンゴはgreenを持っていますが、redとyellowのチェックも外さない限り消えないでほしいのです。
「チェックが入った色を持つ果物を表示したい。」というのが目的なのです。
▼動くサンプル
http://jsfiddle.net/j0yus6mp/6/
▼そのコード
javascipt
1//////////////////// 2////チェックで表示切替 3(function($){ 4 5 //redにチェックがあるときは、「りんご」「みかん」を表示したい 6 $('#red').change(function(){ 7 if ($(this).is(':checked')) { 8 $(".ringo, .mikan").css('color', '#000'); 9 } else { 10 $(".ringo, .mikan").css('color', '#ddd'); 11 } 12 }); 13 14 //greenにチェックがあるときは、「リンゴ」「ブドウ」を表示したい 15 $('#green').change(function(){ 16 if ($(this).is(':checked')) { 17 $(".ringo, .budo").css('color', '#000'); 18 } else { 19 $(".ringo, .budo").css('color', '#ddd'); 20 } 21 }); 22 23 //yellowにチェックがあるときは、「リンゴ」「ミカン」を表示したい 24 $('#yellow').change(function(){ 25 if ($(this).is(':checked')) { 26 $(".ringo, .mikan").css('color', '#000'); 27 } else { 28 $(".ringo, .mikan").css('color', '#ddd'); 29 } 30 }); 31 32})(jQuery); 33 34 35//////////////////// 36////読み込み時は全てチェックして表示 37(function($){ 38 $(document).ready(function(){ 39 $('#red, #yellow, #green').prop("checked", true); 40 $('.apple, .orange, .grape').css('display', 'block'); 41 }); 42})(jQuery); 43
今日ずっと取り組んでこれなので、お手数おかけして申し訳ございませんが、質問させてください。m(_ _)m
よろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー