データベースからのラジオボタンの設定に基づいて表示/非表示を切り替えるphp/jQuery

Question

私はまだjQueryで新しく苦労しています。最後に、ボタンをクリックするとjQueryを表示/非表示に切り替えることができます。私がまだ苦労しているのは、表示/非表示をページの読み込み時にボタンの状態に合わせる方法です。値はPHPを使用してデータベースから来ています。だから私はそれが何であるか分からない。私は本当にいくつかの助けに感謝します！

基本的に、idが 'specify'のボタンがチェックされていると、divのテキストが表示されます。 「開く」ボタンがチェックされている場合、テキストは隠されています。私はcssを設定してdivの指定クラスを非表示にします。私はそれをしなければなりませんか？ここで

はコードです：

HTML

<input type="radio" name="volneed" id="open" class="required" value="open to all" 
<? if($thisvolneed=='open'){echo 'checked="checked"';} ?> /> 
<label for="open"> Open to all </label> 

<input type="radio" name="volneed" id="specify" class="required" value="specify" 
<? if($thisvolneed=='specify'){echo 'checked="checked"';} ?> /> 
<label for="specify"> Specify types of volunteers needed </label> 

<div class="specify"><p>Some info...</p></div> 

CSS：

.specify{display:none;} 

のjQuery：

$(document).ready(function() {   
    $("#specify").change(function(evt) { 
    evt.preventDefault(); 
    $(".specify").show(); 
    }); 

    $("#open").change(function(evt) { 
    evt.preventDefault(); 
    $(".specify").hide(); 
    }); 
}); 

Answer 1

<div>を非表示にするクラスを作成することは、問題に近づけるためのかなり標準的な方法です。よくやった！ <div>でshowまたはhide機能を使用する代わりに、CSSアプローチを使用する場合はaddClassまたはremoveClassを使用するのと同じように簡単です。また、<div>の初期状態は、PHPを使用して必要に応じてページの読み込み時にクラスを適用することで表示できます。

<div <? if($thisvolneed=='specify'){echo 'class="specify"';} ?>><p>Some info...</p></div> 

Answer 2

小さな試み：

<style> 
.specify{display:none;} 
</style> 
<script src="jquery.min.js"></script> 
<input type="radio" name="volneed" id="open" class="required myOption" value="open to all" checked="checked" /> 
<label for="open"> Open to all </label> 

<input type="radio" name="volneed" id="specify" class="required myOption" value="specify" /> 
<label for="specify"> Specify types of volunteers needed </label> 

<div class="specify"><p>Some info...</p></div> 
<script> 
    $(document).ready(function(){ 
     $('.myOption').click(function(){ 
      var $stat = $('#specify')[0].checked; 
      if($stat == true) 
       $('.specify').show(); 
      else 
       $('.specify').hide(); 
     }); 
    }); 
</script> 

メートル必ずそれが再び...あまりにも最適化することができ