if/elseを使用してチェックボックスを含むdivを表示/非表示にする

Question

過去のHTML/CSSのコーディングタイプはまったく新しいものです。私は周りを見回してみましたが、私の特定の問題に解決策を適用する方法がわかりませんでした。私は、次のようなチェックボックスのリストを持っている：

<input type="checkbox" value="de-borders" /> Choose my border

あなたは（5つのチェックボックスがあります）、送信ボタンを押すと、確認されたもののdivを表示するようになっています。だから、私は関数の提出のhrefにリンクしている。私が問題を抱えているのは、ユーザーがボックスを解除し、もう一度送信すると、それらのボックスが消える必要があるということです。これは私が持っているものである

は

（私はそう、私は完全にそれを得ることはありません助けていた）：私は「あれば」問題である必要があり

var show_panels =(function(){ 
    $("#de-options input").each(function(index, element) { 
     var val = $(element).attr('value'); 
     if ($("#de-options input").is(":checked")) 
     { 
      $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
     }); 
    }); 

。これらのチェックボックスをチェックするとどうすればいいのか分かりません。なぜなら、私が今使っている「$ de-options」は、チェックした。

本当に私は「if」のために何を入れるべきかを知る必要があります。

ありがとうございました。

Answer 1

$("#de-options input[type='checkbox']").each(function() { 
     var val = $(this).val(); 
     if($(this).is(':checked')) { 
      $('#' + val).show(); 
     } else { 
      $('#' + val).hide(); 
     } 
    }); 

Answer 2

"val"という変数を "$（要素）.attr（ 'value'）;"に設定しています。あなたの例では、チェックボックスの値は "de-borders"なので、ここではval = "de-borders" ...これまでの細かいことです。しかし、if文では、$（ '＃' + val）または$（ '＃de-borders'）を隠そうとしています。これは、存在しないdeボーダーのIDを持つ要素をページ上に隠すことを意味しています。

代わりにif/elseの内容を次のように置き換えます。 $（要素）.show（）;と$（要素）.hide（）;

Answer 3

HTMLがどのようにこのように見えるかわかりません。それがこのようなものであると仮定すると、これはうまくいくはずです。

HTML

<div id="de-options"> 
    <input type="checkbox" value="de-borders" /> Choose First 
    <input type="checkbox" value="de-borders2" /> Choose Srcond 
    <input type="checkbox" value="de-borders3" /> Choose Third 
</div> 

<div id="de-borders"> Div One</div> 
<div id="de-borders2">Div Two</div> 
<div id="de-borders3">Div Three</div> 

<input type="submit" value="save" /> 

スクリプト

$（関数（）{ここで

$("input[type='submit']").click(function(e){ 
     e.preventDefault(); 

    $("#de-options input[type='checkbox']").each(function() { 
     var item= $(this); 
     var val = item.attr('value'); 
     if (item.is(":checked")) 
     { 
     $('#' + val).show(); 
     } 
     else 
     { 
      $('#' + val).hide(); 
     } 
    }); 
    }); 

}); 

が働いサンプルhttp://jsfiddle.net/hzpVy/15/