Question

我有以下代码。我预计当我运行它时，它会显示内部写有“是”的行，但它会显示最后一行（“正在处理”）。为什么呢？

<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>

关于所选的默认单选按钮和change（）函数

2 个答案: