jquery - 关于选择的默认单选按钮和 change() 函数

Question

我有下面的代码。我希望当我运行它时，它会显示里面写有“是”的行，但它会显示最后一个（“正在进行中”）。为什么？

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

因为您手动调用 $('input[name=negotiation]').change() 所以它会触发 3 次。if 条件不检查是否选择了当前单选并且OnProcess 是最后一个单选，因此将显示最后一行（On Process）。

在此处查看演示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();

Answer 2

试试下面的代码

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


<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" src="js/jquery.js"></script>
<script type="text/javascript">

    function show_hide(values)
    {
        $('tr').hide();
        if(values == '0')
        {
            $('.answer_yes').show();
        }
        else if(values == '1')
        {
            $('.answer_no').show();
        }
        else if(values == '2')
        {
            $('.answer_on_process').show();
        }
    }

    $(document).ready(function()
    {
        var first_to_show = $('input[name=negotiation]').val();
        show_hide(first_to_show);

        $('input[name=negotiation]').change(function()
        {
            show_hide($(this).val());
        });
    });


</script>