Question

我有两个单选按钮，分别是YES（值= 1）和NO（值= 0），当您单击YES时，我使用以下代码显示隐藏分区：

     $("#regaddress").change(function(){
    if ($(this).val() == "1" ) {
        $("#registeredaddress").slideDown("fast"); //Slide Down Effect
    } else {
        $("#registeredaddress").slideUp("fast");    //Slide Up Effect
    }
});

单选按钮代码：

<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No

我需要的是当您单击否时隐藏该分区的代码。对于你们中的一些人来说应该是一个简单的答案，但个人觉得今天下午试着弄清楚如何隐藏它，就像撞墙一样！

Answer 1

这很简单，因为您在原始问题中未发布id或name个属性，我已将其抽象为以下内容：

HTML

<form action="" method="post">
    <fieldset>
        <input type="radio" value="0" name="state" id="no" />
        <label for="no">No</label>
        <input type="radio" value="1" name="state" id="yes" />
        <label for="yes">Yes</label>
    </fieldset>
</form>
<div id="hidden">This div is hidden</div>

的jQuery

$(document).ready(
    function(){
        $('input:radio[name=state]').change(
            function(){
                if ($(this).val()==1) {
                    $('#hidden').show();
                }
                else {
                    $('#hidden').hide();
                }
            }
            );
    });

Demo of the above posted at JS Fiddle

略微修改以考虑slideUp()和slideDown()用法：

$(document).ready(
    function(){
        $('input:radio[name=state]').change(
            function(){
                if ($(this).val()==1) {
                    $('#hidden').slideDown(1000).text('This div is no longer hidden.');
                }
                else {
                    $('#hidden').slideUp(1000).text('This div is now hidden.');
                }
            }
            );
    });

Demo at JS Fiddle

<小时/> 最终修改，以考虑您的id和name属性：

$(document).ready(
    function(){
        $('input:radio[name=regaddress]').change(
            function(){
                if ($(this).val()==1) {
                    $('#registeredaddress').slideDown(1000).text('This div is no longer hidden.');
                }
                else {
                    $('#registeredaddress').slideUp(1000).text('This div is now hidden.');
                }
            }
            );
    });

Demo at JS Fiddle

Answer 2

另外，如果你感兴趣，我做了类似的事情，几乎可以用于任何类型的复选框或表单元素。 Dynamic Show Hide。对于你正在做的事情可能有些过分，但如果你做了很多事情就很方便，因为你可以把它放在js文件中，并在你需要的时候调用它。

隐藏单选按钮

2 个答案:

HTML

的jQuery