根据单选按钮显示/隐藏表格行

时间:2013-04-23 17:55:50

标签: javascript jquery

我有一组四个单选按钮,代表四种不同的条件(良好,改善,恶化,差)。选择“恶化”或“差”应该取消隐藏带有文本区域的表格行来解释为什么条件不好。选择“好”或“改进”应该隐藏表格行。我已经尝试在两个取消隐藏表行的类中添加一个类,但只有一个按钮正在工作(恶化)。我有一种感觉,我需要在那里拾取两个按钮的一个或条款,但我尝试了很多变化,我只是没想出来。感谢这个菜鸟的任何帮助。

这就是我所拥有的:

<tr>
     <td>
      Customer Sentiment:
    </td>
    <td colspan="3">
    <div id="sentiment">
        <input class="xhide" type="radio" id="Good" value="1"   name="sentimentID" <cfif sentimentID eq 1>checked</cfif> /><label for="Good">Good</label>
        <input class="xhide" type="radio" id="Improving" value="2" name="sentimentID" <cfif sentimentID eq 2>checked</cfif> /><label for="Improving">Improving</label>
        <input class="xshow" type="radio" id="Worsening" value="3" name="sentimentID" <cfif sentimentID eq 3>checked</cfif> /><label for="Worsening">Worsening</label>
        <input class="xshow" type="radio" id="Poor" value="4"   name="sentimentID" <cfif sentimentID eq 4>checked</cfif> /><label for="Poor">Poor</label>
    </div>
    </td>
</tr>                        

<tr class="rnotes"">
    <td valign="top">Sentiment Notes:</td>
    <td colspan="3">
        <cfoutput>
        <textarea   name="sentimentNotes"
                    cols="100"
                    rows="4">#sentimentNotes#</textarea>
        </cfoutput>
    </td>
</tr>

脚本:

$(document).ready(function() 
{
    $(".rnotes").hide();

    $(':radio').change(function(){
    var isChecked=$('.xshow').prop('checked');
    $('.rnotes').toggle(isChecked);
    });
});

=============================================== =========================

1 个答案:

答案 0 :(得分:4)

这是脚本:

$(document).ready(function() 
{
    $(".rnotes").hide();

    $('input[type=radio]').change(function(){
        var isChecked = $(this).prop('checked');
        var isShow = $(this).hasClass('xshow');
        $(".rnotes").toggle(isChecked && isShow);
    });
});

工作小提琴:http://jsfiddle.net/LnyJZ/5/