Form mit js, html, nicht ausgeblendeten Felder zunächst

Question

Ich habe ein Problem mit einem Feld, Code HTML

<span id="sudaner"> 
    <input type="radio" name="traveledis" checked value="0" >No 
    <input type="radio" name="traveledis" value="1" />Yes 
</span> 

<div id="sudandetails">` 

und dies ist der js Code

$("#sudaner input[type='radio']").click(function(){ 
    if($(this).attr("value")=="1"){ 
     $("#sudandetails").css("display","block"); 
     $("#countries").prop('required',true); 
     $("#bcfrom").prop('required',true); 
     $("#bcto").prop('required',true); 
     $("#country_reason").prop('required',true); 
    } 
    else { 
     $("#countries").prop('required',false); 
     $("#countries").val(""); 
     $("#bcfrom").prop('required',false); 
     $("#bcfrom").val(""); 
     $("#bcto").prop('required',false); 
     $("#bcto").val(""); 
     $("#country_reason").prop('required',false); 
     $("#country_reason").val(""); 
     $("#sudandetails").css("display","none"); 
    } 
}); 

Ich habe ' checked ' aktiv in ' NO ' aber wenn ich auf das Formular gehe, sehe ich die ' No ' in Standard, aber die Felder sind nicht zuerst versteckt. Ich muss die Auswahl um 'Ja' und wieder 'Nein' verschieben und die Felder sind ausgeblendet oder klicken Sie zweimal in 'Nein' und die Felder sind ausgeblendet. also verstehe ich nicht, warum das Feld zuerst nicht versteckt ist.

Danke für Ihre Hilfe

Answer 1

Ich machte eine Geige für Sie und kombinierte die ready Funktion mit der click Funktion in einem eigenen Handler. Sie können nicht nur den Wert on click überprüfen, da es kein Klicken gibt, wenn das Dokument geladen wird, so dass nichts passiert.

https://jsfiddle.net/ww582Lj9/

function myHandler(e) { 
    if($(this).attr("value")=="1"){ 
      $("#sudandetails").css("display","block"); 
      $("#countries").prop('required',true); 
      $("#bcfrom").prop('required',true); 
      $("#bcto").prop('required',true); 
      $("#country_reason").prop('required',true); 
     } 
     else { 
      $("#countries").prop('required',false); 
      $("#countries").val(""); 
      $("#bcfrom").prop('required',false); 
      $("#bcfrom").val(""); 
      $("#bcto").prop('required',false); 
      $("#bcto").val(""); 
      $("#country_reason").prop('required',false); 
      $("#country_reason").val(""); 
      $("#sudandetails").css("display","none"); 
     } 
} 

$(document).ready(myHandler); 
$("#sudaner input[type='radio']").on("click", myHandler); 

Answer 2

Sie müssen dies div zunächst verbergen. Fügen Sie diese Zeile in Ihr Skript ein

Sie binden ein Ereignis beim Klicken und beim Laden der Seite klicken Ereignis nicht auslösen.