форма с js, html, сначала не скрытые поля

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

I have‘ checked ‘active in‘ NO ‘but when I go to the form, I see The‘ No ‘ in default but the fields are not hidden at first. Мне нужно переместить выбор на » да «и снова» нет «и поля скрыты или нажмите 2 раза в» нет » и поля скрыты. поэтому я не понимаю, почему поле поначалу не скрыто.

Спасибо за помощь

2 ответа

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

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

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

  2. Я сделал скрипку для вас и объединил 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);