Show multiple table rows on radio button click
Hi, how do I make multiple row showing per radio button check( When user click Other, two rows will be showing row for Country Dropdown and row for State Dropdown), it is not working when I do it like the code below a
s I cannot use the same ID more than one time(country-2 used twice)
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>
- </title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
- <script type="text/javascript">
- $(function () {
- $("[name=country]").change(function () {
- $('.hideRow').hide();
- $("#"+this.name+"-" +this.value).show('slow');
- }).filter(':checked').change(); // edited!
- });
- </script>
- <style type="text/css">
- table.theTable {margin-left:10}
- </style>
- </head>
- <body>
- <form action=".">
- <table width="600" class="theTable">
- <tr>
- <td width="200">
- Country
- </td>
- <td width="400">
- <label>
- <input type="radio" name="country" value="1" checked="checked" />
- USA
- </label>
- <label>
- <input type="radio" name="country" value="2" />
- Other
- </label>
- </td>
- </tr>
- <tr>
- <td width="200">
- </td>
- <td width="400">
- </td>
- </tr>
- <tr id="country-1" class="hideRow">
- <td width="200">
- City
- </td>
- <td width="400">
- <input type="text" name="city" />
- </td>
- </tr>
- <tr>
- <td width="200">
- </td>
- <td width="400">
- </td>
- </tr>
- <tr id="country-2" class="hideRow">
- <td width="200">
- Country</td>
- <td width="400">
- Dropdown boxes for country</td>
- </tr>
- <tr id="country-2" class="hideRow">
- <td width="200">State</td>
- <td width="400">
- Dropdown boxes for state</td>
- </tr>
- <tr>
- <td width="200">
- </td>
- <td width="400">
- </td>
- </tr>
- </table>
- <table>
- <tr>
- <td width="200">
- </td>
- <td width="400">
- <input type="submit" value="Submit" />
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>