javascript - 选中单选按钮时显示 div

Question

我多年来一直试图解决这个问题，但一直未能成功。我想做的是，当选择某个单选按钮时，在网页上显示某个 div。我已经能够在提交表单时执行此操作，但我不想依赖于提交它。

<form name="options" action="index.php" method="post">
    <input type="radio" name="option" value="True"/>True<br>
</form>
<div id="show-1" style="display:none;">
    <form action="1.php" method="post">
        <input type="date" name="date"/><br/>
        <select name="people">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </form>
</div>
<script type="text/javascript">
    $(document).ready(function(){
    $("input[name$='option']").click(function(){
    var radio_value = $(this).val();
    if(radio_value =='True') {
        $("#show-1").show("slow");
        }
    });
    });
</script>

Answer 1

您可以通过 jQuery 轻松完成此操作。

$("[value='input1'").click(function() {
  $(".show").show()
});

.show {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="radio" value="input1"><label for="input1">input</label><br>
  <input type="radio" value="input2"><label for="input2">input</label><br>
  <input type="radio" value="input3"><label for="input3">input</label><br>
  <input type="radio" value="input4"><label for="input4">input</label><br>
  <input type="radio" value="input5"><label for="input5">input</label><br>
  <input type="radio" value="input6"><label for="input6">input</label><br>
</form>
<div class="show">
  hello world!
</div>