javascript - 在选定的单选按钮旁边显示一个文本框

Question

我有 1 个单选按钮组和 2 个单选按钮选项。如果选中单选按钮，我想在它旁边显示一个文本字段。

这是我的小提琴

我尝试使用 jQuery 和 .css 函数，但它不起作用。我希望人们能够在他们选择的单选按钮旁边的文本字段中输入他们的网站 URL。如果我选择第一个，它旁边会出现一个文本框。如果我切换到另一个，文本框将消失并出现在第二个单选按钮旁边。

任何帮助，将不胜感激。

非常感谢！

Answer 1

您可以使用display属性代替visibility：

input[type=text] {
  display: none
}

$('input[type=radio]').change(function() {
   $('input[type=text]').hide()
   $(this).parent().next().show()
});

演示

1. show()
2. hide()
3. next()
4. parent()

Answer 2

这将起作用：

//hide both by default
$('#siteCourtier').hide();
$('#siteAgence').hide();

$('#courtierRadio').change(function() {
   if($('#courtierRadio').is(':checked'))
   {
       $('#siteCourtier').show();
       $('#siteAgence').hide();
   }
});

$('#agenceRadio').change(function() {
   if($('#agenceRadio').is(':checked'))
   {
       $('#siteAgence').show();
       $('#siteCourtier').hide();
   }
});