CODEWITHSUNDEEP
javascriptjqueryhtmlradio-button
krishna
krishna

Reputation: 4099

hide <tr> based on selected radio button

I want to hide a table row based on the value selected from a radio button. Those radio buttons were created based on value selected from a dropdown list box.

Here is my code

HTML code for listbox

<select name="txtLT" id="LT" >
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

Jquery

$(document).ready(function() {
    $("#LT").change(function() {
        var selVal = $(this).val();
        $("#tblerow").html('');
        if(selVal == 'c') {
            $("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof"  name="cmpof" value="2"  onclick="hide()"/>2</td>');            
        }
    });
});

Now if radio button 2 is selected, then the table row with tr2 should disappear. Please help me to find the solution.

EDIT

I tried the following JavaScript, but it does not hide the row.

function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }

Could you please suggest what is wrong here?

Upvotes: 1

Views: 3709

Answers (1)

Benjamin Crouzier
Benjamin Crouzier

Reputation: 41865

You can just use the hide and show function of jQuery like so:

$(function () {
    $('#LT').change(function () {
        if ($(this).val() == 'c') {
            $('.radios').show();
        } else {
            $('.radios').hide();
        }
    });
    $('input[name=cmpof]').change(function () {
        if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
           $('#table tr').eq(1).hide(); 
        } else {
           $('#table tr').eq(1).show(); 
        }
    });
});

If you don't want the table row to show up by default, just do it with css.

JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/

Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });

Upvotes: 1

Related Questions