How to hide and show div based on multiple radio button click?

Question

Am working on HTML with Bootstrap and Jquery. I need to hide the div based on the multiple radio click. (I already check with submit button.Its working fine). But i need to do without submit button. Here my code,

Here my code displayed wrong. Its not checking both values, its working for only one condition. How check in multiple selection,

<!DOCTYPE html>
<html>
<head>
<title>Radio Button Selection</title>
<script src="libs/jquery-2.1.3/js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('input[type="radio"]').click(function (e) {
            var checked_option_radio = $('input:radio[name=user_options]:checked').val();
            var checked_site_radio = $('input:radio[name=user_site]:checked').val();

            if(checked_option_radio==='css' || checked_site_radio==='Google')
                {
                    $("#other1").hide();
                }
        });
    });

    </script>
</head>
<body>
    <form id="myform">
        <div>Choose option:
            <input type="radio" name="user_options" value="css" /> CSS 
            <input type="radio" name="user_options" value="jquery" /> jQuery 
            <input type="radio" name="user_options" value="html" /> HTML
            <input type="radio" name="user_options" value="xml" /> XML
        </div>

        <div>Another option:
            <input type="radio" name="user_site" value="Google" /> Google
            <input type="radio" name="user_site" value="Yahoo" /> Yahoo
            <input type="radio" name="user_site" value="Facebook" /> Facebook
            <input type="radio" name="user_site" value="Twitter" /> Twitter
        </div>

        <div class="row" id="other1">
            <textarea class="form-control" rows="4" id="specification" name="specification" placeholder="Enter Specification"></textarea>
        </div>

    </form>
</body>
</html>

Friends correct my code. Please give some other sample code.

Answer 1

<script type="text/javascript">
$(document).ready(function() {
    $(".show_other").change(function(){
        if($(this).is(":checked"))
        {
            $("#other1").hide();
        }
    });
});

</script>

<form id="myform">
    <div>Choose option:
        <input type="radio" name="user_options" value="css" class="show_other" /> CSS 
        <input type="radio" name="user_options" value="jquery" /> jQuery 
        <input type="radio" name="user_options" value="html" /> HTML
        <input type="radio" name="user_options" value="xml" /> XML
    </div>

    <div>Another option:
        <input type="radio" name="user_site" value="Google" class="show_other" /> Google
        <input type="radio" name="user_site" value="Yahoo" /> Yahoo
        <input type="radio" name="user_site" value="Facebook" /> Facebook
        <input type="radio" name="user_site" value="Twitter" /> Twitter
    </div>

    <div class="row" id="other1">
        <textarea class="form-control" rows="4" id="specification" name="specification" placeholder="Enter Specification"></textarea>
    </div>

</form>

How to hide and show div based on multiple radio button click?

Question

1 answers

solution1
0 ACCPTED 2015-05-26 10:13:30

How to hide and show div based on multiple radio button click?

Question

1 answers

solution1 0 ACCPTED 2015-05-26 10:13:30

solution1
0 ACCPTED 2015-05-26 10:13:30