How to Change Event on Radio Group Button???????
I have a problem in changing the event of a radio button.
I have 2 radio groups namely,radio_visualize1 and radio_dept. radio_visualize1 have 3 buttons namely date2,semester,and year.AND radio_dept yes ,no.
- <p id="unbold1">Visualize by:
- <label><input type="radio" name="radio_visualize1" value="date2" id="date2">Date</label>
- <label><input type="radio" name="radio_visualize1" value="semester" id="semester">Semester</label>
- <label><input type="radio" name="radio_visualize1" value="year" id="year">Year</label>
- </p>
- <p id="unbold1">Visualize by Department?:
- <label><input name="radio_dept" type="radio" id="yes" value="yes" checked="CHECKED">Yes</label>
- <label><input name="radio_dept" type="radio" id="no" value="no" >No</label>
- </p>
I want to show and hide a table depending on what i selected on the radio buttons.
For instance, if i selected/checked 'date2' and 'yes', a table row will show which has been hidden at first. if i selected/checked 'date2' and 'no', another different table row will appear..if i selected/checked' year' and 'yes',another row will appear.
Here's my table rows that i want to be hide at first and will only appear base on the selected/CHECKed buttons.
- <tr id="chart_bar_col_line">
- <td id= "unbold">Chart Type</td>
- <td id= "unbold">:</td>
- <td id= "unbold">
- <select name="chart_type" id="chart_type">
- <option value="BarChart">Bar Chart</option>
- <option value="ColumnChart">Column Chart</option>
- <option value="LineChart">Line</option>
- </select>
- </td>
- </tr>
- <tr id="chart_bar_col_pie">
- <td id= "unbold">Chart Type</td>
- <td id= "unbold">:</td>
- <td id= "unbold">
- <select name="chart_type" id="chart_type">
- <option value="BarChart">Bar Chart</option>
- <option value="ColumnChart">Column Chart</option>
- <option value="PieChart">Pie</option>
- </select>
- </td>
- </tr>
- <tr id="chart_bar_col_line_pie">
- <td id= "unbold">Chart Type</td>
- <td id= "unbold">:</td>
- <td id= "unbold">
- <select name="chart_type" id="chart_type">
- <option value="BarChart">Bar Chart</option>
- <option value="ColumnChart">Column Chart</option>
- <option value="PieChart">Pie</option>
- <option value="LineChart">Line</option>
- </select>
- </td>
- </tr>
- <tr id="chart_bar_col_line_mot">
- <td id= "unbold">Chart Type</td>
- <td id= "unbold">:</td>
- <td id= "unbold">
- <select name="chart_type" id="chart_type">
- <option value="BarChart">Bar Chart</option>
- <option value="ColumnChart">Column Chart</option>
- <option value="LineChart">Line</option>
- <option value="MotionChart">Motion Chart</option>
- </select>
- </td>
- </tr>
Here's my jquery code:
- $('#chart_bar_col_line').hide();
- $('#chart_bar_col_line_pie').hide();
- $('#chart_bar_col_line_mot').hide();
- $('#chart_bar_col_pie').hide();
-
-
-
- $('input[name='radio_visualize1']').change(function()
- {
- if ($('input[name='radio_visualize1']:checked').val() == 'date2'){
- if($('input[name='radio_dept']:checked').val() == 'yes'){
- $('#chart_bar_col_line').show();
- }else{
- $('#chart_bar_col_line_pie').show();
- }
- }else if($('input[name='radio_visualize1']:checked').val() == 'semester'){
- if($('input[name='radio_dept']:checked').val() == 'yes'){
- $('#chart_bar_col_pie').show();
- }else{
- $('#chart_bar_col_line').show();
- }
- }else{
- if($('input[name='radio_dept']:checked').val() == 'yes'){
- $('#chart_bar_col_line_mot').show();
- }else{
- $('#chart_bar_col_line').show();
- }
- }
- )}.change();
This did not work..IT ended up showing all the rows.PLEASE HELP ME..