ラジオを選択した後にdivを非表示

Question

Mobile Moneyラジオが選択されている場合にのみ、入力numberを表示する次のコードを作成しています。

はスクリプト：

$(document).ready(function() { 
    $('input[type="radio"]').click(function() { 
    if ($(this).attr('id') == 'mobilemoney') { 
     $('#mobilemoneynumber').show(); 
    } else { 
     $('#mobilemoneynumber').hide(); 
    } 
    }); 
}); 

HTML：ページのみ入力numberを表示されているデフォルトで

<form class="form-basic" method="post" action="#"> 
    <div class="form-row"> 
    <label><span>Select one</span></label> 
    <div class="form-radio-buttons"> 
     <div> 
     <label> 
      <input type="radio" name="radio" id="mobilemoney"> 
      <span>Mobile Money</span> 
     </label> 
     </div> 
     <div> 
     <label> 
      <input type="radio" name="radio"> 
      <span>Cash on delivery</span> 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-row"> 
    <label> 
     <span>Number</span> 
     <input type="text" id="mobilemoneynumber" name="mobilemoneynumber"> 
    </label> 
    </div> 
    <div class="form-row"> 
    <button type="submit">Submit Form</button> 
    </div> 
</form> 

が表示されていると私はそれがデフォルトで表示させたいです。

どうすればいいですか？

Answer 1

は、両方のラジオに値を追加している親要素を返します：

<input type="radio" name="radio" value="mobilemoney"> 
<input type="radio" name="radio" value="cash"> 

をjqueryの：

$('input[type="radio"]').click(function() { 
    if($(this).val() == 'mobilemoney') { 
     $('#mobilemoneynumber').show();   
    } 
    else { 
     $('#mobilemoneynumber').hide(); 
    } 
}); 

Answer 2

Radioは、要素'form-row'にラップされています。 input要素の親の前の要素はどれですか。

$('input[type="radio"]').click(function() { 
    if ($(this).attr('id') == 'mobilemoney') { 
    $(this).closest(".form-row").next().show(); 
    } else { 
    $(this).closest(".form-row").next().hide(); 
    } 
}); 

Fiddle

closest(".form-row")クラス名form-row