开发者

Hide on radio button

I have two radio buttons that are YES (value=1) and NO (value=0), I'm using the following code to show a hidden division when you click on YES:

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

Code for Radio Buttons:

开发者_Go百科<input name="regaddress" id="regaddress" type="radio" value="1">Yes
<input name="regaddress" id="regaddress" type="radio" value="0" checked> No 

What I need is the code to hide that division when you click NO. Should be a simple answer for some of you, but personally feel like banging my head against a wall this afternoon trying to work out how to hide it!


That's easy enough, because you posted no id or name attributes in your original question, I've abstracted it out to the following:

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.

Amended slightly to take into account the slideUp() and slideDown() usage:

$(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.


Final edit to take into account your id and name attributes:

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


Also, if you're interested, I did something similar that you can use for pretty much any type of checkbox or form element. Dynamic Show Hide. It may be a little overboard for what you're doing but it's handy if you do this thing a lot since you can stick it in it's on js file and call it whenever you need it.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜