форма с JS, HTML, не скрытые поля в первой

Question

У меня есть проблема с полем, код 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">` 

и это код JS

$("#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"); 
    } 
}); 

У меня есть ' checked ' активен в ' NO ', но когда я иду в форму, я вижу ' Нет ' по умолчанию, но поля сначала не скрываются. Мне нужно переместить выделение 'Yes' и снова 'No' и по нему будут показаны поля, которые вы видите или нажмите кнопку «2» в поле «Нет». поэтому я не понимаю, почему поле не скрывается вначале.

Спасибо за вашу помощь

Answer 1

Я сделал скрипку для вас и объединил функцию ready с функцией click в собственном обработчике. Вы можете не только проверить значение on click, потому что нет щелчка, если документ загружается, поэтому ничего не происходит.

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

Вам нужно, чтобы скрыть это Див изначально. добавьте эту строку в свой скрипт

$("#sudandetails").hide(); 

Вы связываете событие при щелчке и когда событие загрузки страницы не запускается.