Question

我有一个用户可以保存并返回编辑的表单。我在表单上有一个区域，根据用户对上一个问题的回答来切换div。如果答案为“是”，则应显示div。但是，如果用户返回到表单，并且选择了“是”，则div保持隐藏状态。

HTML：

<div>
    <label>Select:</label>
    <input type="radio" name="radio" class="toggle" value="1" checked="checked">Yes
    <input type="radio" name="radio" class="toggle" value="0">No
</div>

<div id="details">
   Details
</div>

使用Javascript：

$(document).ready(function() {

    $('#details').hide();

    $('.toggle').on('change',function(){

        var showOrHide = ($(this).val() == 1) ? true : false;

        $(this).parent().next('#details').toggle(showOrHide);

    })    

})

Answer 1

这是因为您明确隐藏了document.ready

上的详细信息div

首先检查radiobutton的值。

$(document).ready(function() {

    if($('.toggle:checked').val() != 1)
        $('#details').hide();

    ...

})

Answer 2

只是想说，我用更少的代码创建了一个更好的版本：

// Make sure the page is loaded before doing anything
$(document).ready(function() {
    // Makes sure that it shows the div correctly, and doesn't flip the effects
    if($('.toggle:checked').val() !== 1)
        // Hides the div
        $('#details').hide();

    // When there is a change in the selection
    $('.toggle').on('change', function() {
        // Hide or show the div, depending on the var showOrHide
        $(this).parent().next('#details').fadeToggle('slow');
    });
});

它也有很好的记录。：）

Answer 3

演示：http://jsfiddle.net/BbrwT/5/

我简化了你的代码：

$(document).ready(function() {
    $('#details').hide();

    $('.toggle').on('change',function(){
        $('#details').toggle($(this).val()); 
    });
});

我也改变了你的HTML（从第一个元素中删除了checked="checked"并将其添加到第二个元素中）。

如何使用jQuery加载基于保存的单选按钮选择的隐藏div？

3 个答案: