Hide ein Div nach der Auswahl eines Radios

Question

Ich arbeite an den folgenden Codes, wo ich möchte den Eingang number erscheinen nur, wenn das Radio Mobile Money ausgewählt ist.

Script:

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

Html:

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

standardmäßig, wenn die Seite nur die Eingabe angezeigt wird number wird angezeigt, und ich möchte es standardmäßig angezeigt werden.

Wie kann ich das tun?

Answer 1

Mehrwert sowohl für Radio hat:

<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 ist in das Element 'form-row' eingewickelt. Welches ist das vorherige Element des Elternelements von input Element.

$('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") wird das übergeordnete Element zurück, die den Klassennamen form-row