jQuery событие клика не отображается и скрывает ввод

Question

У меня есть форма, в которой я хочу показать пользовательскую ссылку, если пользователь нажимает переключатель, иначе она должна быть скрыта. но это не работает есть идеи почему? спасибо.

$(document).ready(function(){

    $("#customLinkRadio").click(function(){
        $("#customLink").show('fade');
    });

    $("#defaultPaymentMethodRadio").click(function(){
        $("#customLink").hide('fade');
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
  <div class="col-sm-8">
      <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="default" name="payment_method" id="defaultPaymentMethodRadio" class="custom-control-input">
          <label class="custom-control-label" for="default">Default</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="custom_link" name="payment_method" id="customLinkRadio" class="custom-control-input">
          <label class="custom-control-label" for="custom_link">Custom Link</label>
      </div>
      <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
  </div>
</div>

Answer 1

$(document).ready(function(){
    $("input[name='payment_method']").click(function(){
       if($(this).val() == "customLinkRadio"){
           $("#customLink").show("fade")
       }
       else if($(this).val() == "defaultPaymentMethodRadio")
       {
           $("#customLink").hide("fade");
       }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
    <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
    <div class="col-sm-8">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" name="payment_method" value="defaultPaymentMethodRadio" id="defaultPaymentMethodRadio" class="custom-control-input">
            <label class="custom-control-label" for="defaultPaymentMethodRadio">Default</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" checked name="payment_method" value="customLinkRadio" id="customLinkRadio" class="custom-control-input">
            <label class="custom-control-label" for="customLinkRadio">Custom Link</label>
        </div>
        <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
    </div>
</div>

Answer 2

Я предлагаю использовать событие .change() вместо щелчка, поскольку вы проверяете переключатель, вы должны получить значение переключателя и проверить, какой параметр выбран, примечание , которое я добавил Значение ваших переключателей в моем фрагменте, и основная проблема, как указано в других ответах, заключается в идентификаторах HTML тегов, которые.

$(document).ready(function(){
  $("#customLink").hide()
  $("input[name='payment_method']").change(function(){
       $(this).val() == 2 ? $("#customLink").show() : $("#customLink").hide();
  });
});

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div class="form-group row">
    <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
    <div class="col-sm-8">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="default" checked name="payment_method" id="defaultPaymentMethodRadio" class="custom-control-input" value="1">
            <label class="custom-control-label" for="default">Default</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" id="custom_link" name="payment_method" id="customLinkRadio" class="custom-control-input" value="2">
            <label class="custom-control-label" for="custom_link">Custom Link</label>
        </div>
        <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
    </div>
</div>

Answer 3

Вам нужно только попробовать show и hide, а также удалить несколько Id's из элемента. У вас есть несколько ids default и custom_link.

$(document).ready(function(){

    $("#customLinkRadio").click(function(){
        $("#customLink").show(500);
    });

    $("#defaultPaymentMethodRadio").click(function(){
        $("#customLink").hide(500);
    });

});

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


<div class="form-group row">
    <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
    <div class="col-sm-8">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" name="payment_method" id="defaultPaymentMethodRadio" class="custom-control-input">
            <label class="custom-control-label" for="default">Default</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio"  name="payment_method" id="customLinkRadio" class="custom-control-input">
            <label class="custom-control-label" for="custom_link">Custom Link</label>
        </div>
        <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
    </div>
</div>

Answer 4

У вас есть несколько атрибутов id в ваших радиовходах. Вот почему они не работают.

Пожалуйста, удалите и проверьте снова.

См. Пример ниже

$(document).ready(function(){
    $("#customLink").hide();
    $("#customLinkRadio").click(function(){
        $("#customLink").show('fade');
    });

    $("#defaultPaymentMethodRadio").click(function(){
        $("#customLink").hide('fade');
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
    <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
    <div class="col-sm-8">
        <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" name="payment_method" id="defaultPaymentMethodRadio" class="custom-control-input">
              <label class="custom-control-label" for="defaultPaymentMethodRadio">Default</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
              <input type="radio" name="payment_method" id="customLinkRadio" class="custom-control-input">
              <label class="custom-control-label" for="customLinkRadio">Custom Link</label>
        </div>
        <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
    </div>
</div>

Answer 5

Несмотря на то, что множественный атрибут id в элементе HTML не приведет к возникновению какой-либо ошибки, он может привести к неожиданным результатам, например id после первого. будет игнорироваться молча. Таким образом, когда вы будете ссылаться на них (атрибуты после первого) в вашем коде, ваш код обязательно потерпит неудачу.

У вас есть несколько атрибутов id , для которых установлены переключатели. Поскольку атрибут id должен быть уникальным в документе, а первые идентификаторы не совпадают с теми, что используется в сценарии, ваш код не может скрыть / показать.

Удалите неправильный код идентификаторы из переключателей.

Обновление: Изменения, внесенные в атрибут элемента lable для путем сопоставления с id * переключателя 1024 * для размещения с bootstrap:

$(document).ready(function(){

    $("#customLinkRadio").click(function(){
        $("#customLink").show('fade');
    });

    $("#defaultPaymentMethodRadio").click(function(){
        $("#customLink").hide('fade');
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
    <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
    <div class="col-sm-8">
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" name="payment_method" id="defaultPaymentMethodRadio" class="custom-control-input">
            <label class="custom-control-label" for="defaultPaymentMethodRadio">Default</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline">
            <input type="radio" name="payment_method" id="customLinkRadio" class="custom-control-input">
            <label class="custom-control-label" for="customLinkRadio">Custom Link</label>
        </div>
        <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
    </div>
</div>

Использование других id :

$(document).ready(function(){

    $("#custom_link").click(function(){
        $("#customLink").show('fade');
    });

    $("#default").click(function(){
        $("#customLink").hide('fade');
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="button_text" class="col-sm-3 col-form-label">Payment Method</label>
  <div class="col-sm-8">
      <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="default" name="payment_method" class="custom-control-input">
          <label class="custom-control-label" for="default">Default</label>
      </div>
      <div class="custom-control custom-radio custom-control-inline">
          <input type="radio" id="custom_link" name="payment_method" class="custom-control-input">
          <label class="custom-control-label" for="custom_link">Custom Link</label>
      </div>
      <input type="url" name="custom_url" placeholder="https://www.yourlink.com" id="customLink" class="form-control mt-2">
  </div>
</div>