Click here to Skip to main content
15,867,756 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
hiiii ,

i have 3 radio buttons A , B , C in one group
and have also 3 Div
i want to show a div for each radio button

for example :-
when user choose A --> apple word appeared
when user choose B --> ball word appeared [ remove Apple ]
when user choose C --> Cat word appeared [ remove ball and cat ]

as shown below , it works but not the way i want

if user change his choice during the running time , it didn't remove the old div 's answer
how can i do it ??

ASP.NET
<head runat="server">
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("div").hide();
            var myfunction = function (id, result) {
                $(id).click(function () {
                    $(result).show();
                });
            };

            myfunction('#radio1', '#divapple');
            myfunction('#radio2', '#divBall');
            myfunction('#radio3', '#divCat');
        });
        
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td>
                <input type="radio" id="radio1" name="x" />A
                <input type="radio" id="radio2" name="x" />B
                <input type="radio" id="radio3" name="x" />C
                <br />
                <div id="divapple">
                    Apple
                </div>
                <div id="divBall">
                    Ball
                </div>
                <div id="divCat">
                    Cat
                </div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
Posted

1 solution

i was able to solve it

HTML
<script type="text/javascript">
       
        $(document).ready(function () {
            $("div").hide();
            var myfunction = function (id, result) {
                $("input").click(function () {
                    if ($(id).is(':checked')) {
                        $(result).show();
                    }
                    else {
                        $(result).hide();
                    }
                });
            }

            myfunction('#radio1', '#divapple');
            myfunction('#radio2', '#divBall');
            myfunction('#radio3', '#divCat');
        });   
    </script>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900