根據單選按鈕選擇顯示/隱藏div

所以我在網上發現了其他答案，但我很想知道爲什麼我擁有的不是另一個有效的解決方案。當我點擊一個單選按鈕時，沒有div出現/消失。我有顯示：默認沒有。（我也使用CSS，而不是JS嘗試並且還沒有工作）根據單選按鈕選擇顯示/隱藏div

index.php文件：

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 
    } 
}

來源

2016-07-08 djd97

所以，你想div的顯示/隱藏在頁面加載本身？ –

你不需要css和js，它看起來很好。你能解釋什麼是行不通的嗎？ –

應該隱藏這四個div。有兩個單選按鈕，如果按一個比前兩個div應該出現，並且如果按下另一個按鈕而不是最後兩個按鈕應該出現（並且如果它們來回切換而沒有頁面刷新，則其他按鈕應該隱藏）。 @Shlomi我知道我不需要兩個，但我都嘗試過，都沒有工作。當我選擇一個單選按鈕時，div不顯示。 – djd97

這應該設置的一切，隱。

<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 
    } 
}

來源

2016-07-08 15:15:01

這就是我的，但它不起作用 – djd97

@ djd97你可以顯示你的HTML？ –

我不認爲問題在那裏。但我會將其添加到我的帖子中。 – djd97

見例如：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"; 
    } 
    }

來源

2016-07-08 15:14:15

我也需要它，而不必在兩者之間切換。我需要改變這個工作：https：//jsfiddle.net/8rjn9v68/2/ – djd97

看到這裏jsfiddle

與JQ 一個例子，我不知道你的HTML如下所以我自己做了一個

<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}

來源

2016-07-08 15:41:00

爲什麼不能正常工作：https://jsfiddle.net/8rjn9v68/10/ – djd97

抱歉。我不知道多少JavaScript，這就是爲什麼我給你一個jQuery解決方案。我只能說這些都是錯誤：Uncaught ReferenceError：delivery is not definedonclick。我只希望上面的答案與jQuery或CSS將幫助你 –

我認爲你可以很容易地做到這一點與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; 
}

但你問爲什麼你的一段代碼不工作。確保您的腳本標記位於主體結束標記或首端標記之前。也許那麼它的工作。

來源

2016-07-08 15:44:13 SvenL

根據單選按鈕選擇顯示/隱藏div

回答

相關問題