Question

I have the code below. I expected that when i run it, it shows the row with “Yes” written inside but it shows the last one (“On process”). Why?

jsfiddle

<input type="radio" name="negotiation" value="0" checked="checked">Yes
<input type="radio" name="negotiation" value="1">No
<input type="radio" name="negotiation" value="2">On process


<table>
    <tr class="answer_yes"><td>Yes</td></tr>
    <tr class="answer_no" ><td>No</td></tr>
    <tr class="answer_on_process"><td>On process</td></tr>
</table>

<script type="text/javascript">
    $('input[name=negotiation]').change(function(){
        $('tr').hide();
        if($(this).val() == '0')
        {
            $('.answer_yes').show();
        }
        else if($(this).val() == '1')
        {
            $('.answer_no').show();
        }
        else if($(this).val() == '2')
        {
            $('.answer_on_process').show();
        }
    }).change();
</script>

Answer 1

Because you manually call $(‘input[name=negotiation]’).change() so it will trigger 3 times. The if condition does not check if the current radio is selected or not and OnProcess is the last radio, so the last row (On Process) will be display.

See demo here http://jsfiddle.net/dkdkj/6/

$('input[name=negotiation]').change(function(){
    if(!$(this).is(":checked"))
        return;

    $('tr').hide();

    if($(this).val() == '0')
    {
        $('.answer_yes').show();
    }
    else if($(this).val() == '1')
    {
        $('.answer_no').show();
    }
    else if($(this).val() == '2')
    {
        $('.answer_on_process').show();
    }
}).change();