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

Question

所以我在網上找到了其他答案，但我很想知道為什么我所擁有的不是另一個有效的解決方案。 當我單擊一個單選按鈕時，沒有div出現/消失。 我有顯示：默認沒有。 （我也嘗試使用CSS而不是JS，但也沒用）

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

Answer 1

請參閱示例： 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 2

這應該將一切都設置為隱藏。

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

看到這里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}

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

但是你在問為什么你的代碼不起作用。 確保腳本標記位於正文標記或標題結尾之前。 也許它有效。