не работает checked в JS

Question

Есть форма, в которой меняются пола в зависимости от положения радиопереключателя. Но при обновлении страницы, радиопереключатель стоит в нужном положении, а форма не показывается. затем, когда переключатель меняюш, все работает как нужно.

    $(document).ready(function() {
      $(".js-tilda-rule").change(function() {
    
        if ($('#pay1').attr("checked")) {
          $('#button1').show();
        } else {
          $('#button1').fadeOut(0);
        }
 if ($('#pay2').attr("checked")) {
      $('#button2').show();
    } else {
      $('#button2').fadeOut(0);
    }
      });
    });

и сам HTML

<label class="radio__control t-text t-text_xs">
            <input type="radio" name="paymant" id="pay1" value="При получении на почте" checked="checked" class="radio js-tilda-rule">
            <div class="radio__indicator"></div>При получении на почте</label>
<label class="radio__control t-text t-text_xs">
            <input type="radio" name="paymant" id="pay2" value="Хочу оплатить на карту (экономия 40 грн)" class="radio js-tilda-rule"><div class="radio__indicator"></div>Хочу оплатить на карту (экономия 40 грн)</label> 

<button class="button" id="button1" style="display: none;">Оформить заказ1</button>
  <button class="button" id="button2" style="display: none;">Оформить заказ2</button></form>

Answer 1

const onChange = () => {
  if ($('#pay1').prop("checked")) {
    $('#button1').show();
    $('#button2').hide();
  } else {
    $('#button2').show();
    $('#button1').hide();
  }
}

$(document).ready(function() {
  $(".radio").change(onChange);
  
  onChange();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="radio__control t-text t-text_xs">
            <input type="radio" name="paymant" id="pay1" value="При получении на почте" checked class="radio js-tilda-rule">
            <div class="radio__indicator"></div>
            При получении на почте
  </label>
<label class="radio__control t-text t-text_xs">
            <input type="radio" name="paymant" id="pay2" value="Хочу оплатить на карту (экономия 40 грн)" class="radio js-tilda-rule"><div class="radio__indicator"></div>Хочу оплатить на карту (экономия 40 грн)</label>

<button class="button" id="button1" style="display: none;">Оформить заказ1</button>
<button class="button" id="button2" style="display: none;">Оформить заказ2</button></form>

Answer 2

$(document).ready(function() {
  $(".js-tilda-rule").change(function() {
    ...
  }).change();
});

БЛОГ НА HUSL

не работает checked в JS

Ответы (2 шт):