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>

Answer 2

我觉得这就是你想要的东西

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

Answer 3

您可以根据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/

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

选中单选按钮时显示div

4 个答案: