使文本框显示在所选单选按钮旁边

Make a textbox appear next to selected radio button

本文关键字：单选按钮 文本 显示      更新时间：2023-09-26

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

这是我的小提琴

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

任何帮助将不胜感激。

多谢！

您可以使用

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()

这将起作用：

//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();
   }
});
相关文章：