根據單選按鈕顯示/隱藏表格行

Question

我有一組四個單選按鈕，分別代表四個不同的條件（好，改善，惡化，差）。 選擇“變差”或“變差”應取消隱藏帶有文本區域的表行，以說明條件不好的原因。 選擇“好”或“改善”將隱藏表行。 我嘗試將一個類添加到取消隱藏表行的兩個類中，但是只有一個按鈕在起作用（令人擔憂）。 我感覺我需要在某處放置一個or子句來同時拾取兩個按鈕，但是我嘗試了許多變體，但我只是沒有想到。 感謝這個菜鳥的任何幫助。

這是我所擁有的：

<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);
    });
});

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

Answer 1

這是腳本：

$(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/