根据单选按钮选择显示/隐藏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;
}

但是你在问为什么你的代码不起作用。 确保脚本标记位于正文标记或标题结尾之前。 也许它有效。