选中单选按钮时显示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> 

Answer 2

我想这样的事情就是你想要的

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

Answer 3

您根据检查的jquery 进行检查 ，而不是.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关键帧处理带有淡入淡出动画的普通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>