divをラジオボタンの選択に基づいて表示/非表示

Question

私は他の回答をオンラインで見つけましたが、私が持っているものがなぜ別の有効な解決策ではないのか不思議です。ラジオボタンをクリックすると、divは表示されず/消えます。私はデフォルトでdisplay：noneを持っています。

if(isset($_POST['pickupDelivery'])){ 
    if($_POST['pickupDelivery'] == "pickup"){ 
     ?> 
     <script type="text/javascript"> 
      document.getElementById("pickupName").style.display="block"; 
      document.getElementById("desiredPickup").style.display="block"; 
      document.getElementById("deliveryAddress").style.display="none"; 
      document.getElementById("desiredDelivery").style.display="none"; 
     </script> 
     <style> 
      #pickupName, #desiredPickup { 
       display: block; 
      } 
      #deliveryAddress, #desiredDelivery { 
       display: none; 
      } 
     </style>  
     <?php 
    } else if($_POST['pickupDelivery'] == "delivery") { 
     ?> 
     <script type="text/javascript"> 
      document.getElementById("pickupName").style.display="none"; 
      document.getElementById("desiredPickup").style.display="none"; 
      document.getElementById("deliveryAddress").style.display="block"; 
      document.getElementById("desiredDelivery").style.display="block"; 
     </script> 
     <?php 
    } 
} 

Answer 1

これは、すべてを設定する必要があります隠された

<style> 
    #pickupName, #desiredPickup, #deliveryAddress, #desiredDelivery { 
     display: none; 
    } 
</style> 

、これはラジオボタン

if(isset($_POST['pickupDelivery'])){ 
    if($_POST['pickupDelivery'] == "pickup"){ 
     ?> 
     <script type="text/javascript"> 
      document.getElementById("pickupName").style.display="block"; 
      document.getElementById("desiredPickup").style.display="block"; 
     </script> 
     <?php 
    } else if($_POST['pickupDelivery'] == "delivery") { 
     ?> 
     <script type="text/javascript"> 
      document.getElementById("deliveryAddress").style.display="block"; 
      document.getElementById("desiredDelivery").style.display="block"; 
     </script> 
     <?php 
    } 
} 

Answer 2

は、例を参照してください：

index.phpファイルを（私はまた、代わりにJSのCSSを使用してみましたし、それもうまくいきませんでした）https://jsfiddle.net/Dhanck/8rjn9v68/1/

for (var i = 0; i < radios.length; i++) { 
    if (radios[i].checked) { 
     val = radios[i].value; 
     document.getElementById("box1").style.display="none"; 
     document.getElementById("box2").style.display="block"; 
    }else{ 
    document.getElementById("box2").style.display="none"; 
     document.getElementById("box1").style.display="block"; 
    } 
    } 

Answer 3

に応じてフィールドを表示し、非表示にするJQ と私はどのようにあなたのhtmlのルックスを知らないjsfiddle

にこちらの例をご覧くださいだから私は自分を作った。

<div class="test"> 
    aaa 
</div> 
<div class="test"> 
    bbb 
</div> 
<div class="test"> 
    ccc 
</div> 
<div class="test"> 
    ddd 
</div> 
<div class="radios"> 
    <input type="radio" > 
    <input type="radio" > 

</div> 

の

CSS：

div.test { display:none} 

JQ：

：

var radio = $("input:radio") 

$(radio).change(function(){ 
    if ($(this).is(':first-child')) { 
     $(".test:nth-child(1),.test:nth-child(2)").show() 
     $(".test:nth-child(3),.test:nth-child(4)").hide() 
    }else{ 
     $(".test:nth-child(3),.test:nth-child(4)").show() 
     $(".test:nth-child(1),.test:nth-child(2)").hide() 
    } 
}); 

またはちょうどCSSとは

はここjsfiddle

HTML見ます

<input type="radio" class="button1" > 
<input type="radio" class="button2"> 
<div class="test1"> 
    aaa 
</div> 
<div class="test2"> 
    bbb 
</div> 
<div class="test3"> 
    ccc 
</div> 
<div class="test4"> 
    ddd 
</div> 

CSS：

div { display:none} 
input.button1:checked ~ .test1,input.button1:checked ~ .test2 {display:block} 
input.button1:checked ~ .test3,input.button1:checked ~ .test4 {display:none} 
input.button2:checked ~ .test3,input.button2:checked ~ .test4 {display:block} 
input.button2:checked ~ .test1,input.button2:checked ~ .test2 {display:none} 

Answer 4

私はあなたが簡単に行うことができると思うことはjQuery

jQueryが

$("input[type=radio]").change(function() { 
    if ($(this).val() === 'pickup') { 
    $("#pickupName").addClass("show"); 
    $("#desiredPickup").addClass("show"); 
    $("#deliveryAddress").removeClass("show"); 
    $("#desiredDelivery").removeClass("show"); 
    } else if ($(this).val() === 'delivery') { 
    $("#deliveryAddress").addClass("show"); 
    $("#desiredDelivery").addClass("show"); 
    $("#pickupName").removeClass("show"); 
    $("#desiredPickup").removeClass("show"); 
    } 
}); 

そして、単にあなたのCSS

CSSに以下を追加して

.show{ 
    display: block !important; 
} 

しかし、あなたのコードが機能していない理由を尋ねています。スクリプトタグが本文終了タグまたは終了タグの前にあることを確認してください。多分それは動作します。