Показать / скрыть текстовое поле, когда выбрано другое радио - jQuery Событие не запускается - PullRequest
Новая
       32

Показать / скрыть текстовое поле, когда выбрано другое радио - jQuery Событие не запускается

0 голосов
/ 11 января 2020

Я пытаюсь скрыть textarea, если опция other не выбрана. Я не получаю никаких ошибок, поэтому я предполагаю, что синтаксис правильный, но слушатель событий, я думаю, неверный. Я пробовал focus() вместо click(), потому что думал, что, возможно, input не зарегистрируется как click. Однако ни один из них не сработал.

HTML: 

<div>
    <input type="radio" name="when" value="time" />
    <br />
    <input type="radio" name="when" value="count" />
    <br />
    Other:
    <input type="radio" name="when" value="other" />
    <br />
    <textarea name="when_other"></textarea>
</div>

Javascript: 

<script type="text/javascript">
    $("input[name='when']").click(function() {
        if($("input[name='when']").value == 'other'){
            $("text[name='when_other']").attr('display', 'block');
        } else {
            $("text[name='when_other']").attr('display', 'none');
            $("text[name='when_other']").html('');
        }
    });
</script>

Выше также приведен порядок отображения разметки, HTML первый, JS трейлинг. На странице также нет динамического c контента, поэтому live() / on() Я не думаю, что это необходимо.

Ответы [ 4 ]

2 голосов
/ 11 января 2020

В вашем коде есть небольшие ошибки, сравните это: 

textarea {display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="radio" name="when" value="time" />
<br />
<input type="radio" name="when" value="count" />
<br />
Other:
<input type="radio" name="when" value="other" />
<br />
<textarea name="when_other"></textarea>
</div>
<script type="text/javascript">
$("body").on("click","input[name='when']",function() {
    if($("input[name='when']:checked").val()== 'other'){
        $("textarea[name='when_other']").css('display', 'block');
    } else {
        $("textarea[name='when_other']").css('display', 'none');
        $("textarea[name='when_other']").val('');
    }
});
</script>
0 голосов
/ 11 января 2020

Как насчет Toggle? 

$(":input[name='when']").on("change", function () {
  $("textarea[name='when_other']").toggle(this.value === 'other' && this.checked);
//alert('click');
}).change();
textarea {
    display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <input type="radio" name="when" value="time" />
    <br />
    <input type="radio" name="when" value="count" />
    <br />
    Other:
    <input type="radio" name="when" value="other" />
    <br />
    <textarea name="when_other"></textarea>
</div>
0 голосов
/ 11 января 2020

Вы можете сделать это, используя this в jQuery. 

$(document).ready(() => {
  $('input[name ="when"]').click(function() {
    $("textarea").show();

    if ($(this).val() == "other")
      $("textarea").show();
    else
      $("textarea").hide();
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="radio" name="when" value="time" />
  <br />
  <input type="radio" name="when" value="count" />
  <br /> Other:
  <input type="radio" id="show_other" name="when" value="other" />
  <br />
  <textarea name="when_other"></textarea>
</div>
0 голосов
/ 11 января 2020

В вашем javascript, просто сделайте так, это решит вашу проблему 

var $selectAll = $( "input:radio[name=when]" );
$selectAll.on( "change", function() {
if($("input[name='when']:checked").val() != "other")
{ 
  $("#when_other").hide();
}
else{
 $("#when_other").show();
  }
}

, а в вашем html добавьте id к своей текстовой области, как это 

<textarea id="when_other" name="when_other"></textarea>
...