jQuery：チェックされたラジオボタンに基づいてテーブル行を非表示または表示

Question

ここで見つかった例は採用できませんでしたので、新しい質問として投稿します。

<tr id="catering-types"> 
    <td colspan="2">Catering Option</td> 
    <td> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="pickup-only" value="pickup-only" checked="checked"> 
     Pickup Only</label> 
     </div> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="delivered" value="delivered">Delivered</label> 
     </div> 
     <div class="catering-radio-option"> 
     <label><input type="radio" name="catering_type" id="fully-serviced" value="fully-serviced">Fully Serviced</label> 
     </div> 
    </td> 
</tr> 

をラジオボタンにチェックをどのようなユーザーに基づいて、非表示または表示されるべきものの下の行：

私はラジオボタンで1、いくつかのテーブルの行をしました。この例では、ユーザーが[配信済み]ラジオボタンを選択した場合は、下の表の行のみを表示し、そうでない場合は非表示にする必要があります。

おかげ

ジョージ

Answer 1

は、ラジオボタンをクリックハンドラを追加します。 チェックされている場合は$（this）.closest（ 'tr'）。next（）。hide（）;

最も近いは、必要な魔法の機能です。正しいセレクタを上方に検索します。

onclick = "$（this）.closest（ 'tr'）。next（）。hide（）;を追加するだけです。ラジオボタンの属性として使用します。

これはケータリングタイプの行の後に行を隠すでしょう。もちろん、クリックハンドラのセレクタは他のタイプのセレクタを変更する必要があります。