选中单选按钮时显示 div答案

【问题标题】：Show div when radio button is checked选中单选按钮时显示 div
【发布时间】：2018-08-19 00:51:21
【问题描述】：

我多年来一直在尝试解决这个问题，但我一直无法解决。 What i'd like to do is have a certain div show on the webpage when a certain radio button is selected.提交表单时我已经能够做到这一点，但我宁愿不必依赖提交。

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

【问题讨论】：

你必须使用 AJAX 来做到这一点。

标签： javascript html forms input radio-button

【解决方案1】：

我认为你想要这样的东西

var isChecked = $(this).prop("checked");
if(isChecked)
    $("#show-1").show("slow");

【讨论】：

你应该总是在 if 语句中使用大括号，因为 IE 不支持“松散”的。
谢谢！我会解决的

【解决方案2】：

您根据 jquery is checked 进行检查，而不是 .val

$(document).ready(function(){
        $("input[name$='option']").click(function(){
        var radio_value = $(this).is(':checked');
        if(radio_value) {
            $("#show-1").show("slow");
            }
        });
    });

https://jsfiddle.net/owb2bkw2/4/

【讨论】：

【解决方案3】：

您可以通过 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>

【讨论】：

【解决方案4】：

带有通过CSS keyframes处理的淡入淡出动画的普通JS解决方案：

document.querySelector("input[name$='option']").addEventListener('click', function() {
  if (this.checked) {
    document.querySelector("#show-1").style.display = 'block';
    document.querySelector("#show-1").classList.add('animate');
  }
})

.animate {
  opacity: 1;
  animation: fade 1s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<form name="options" action="index.php" method="post">
  <input type="radio" name="option" />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>

【讨论】：