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

Javascript 使文本框显示在所选单选按钮旁边,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有1个单选按钮组和2个单选按钮选项。 如果选中单选按钮,我想在其旁边显示一个文本字段 这是我的 我试着使用jQuery和.css函数,但不起作用。 我希望人们能够在他们选择的单选按钮旁边的文本字段中键入他们的网站URL。如果我选择第一个,它旁边会出现一个文本框。如果我切换到另一个,文本框将消失并出现在第二个单选按钮旁边 任何帮助都将不胜感激 非常感谢 您可以使用显示属性而不是可见性: input[type=text] { display: none } 您可以使用显示属性而不

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

这是我的

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

任何帮助都将不胜感激


非常感谢

您可以使用
显示
属性而不是
可见性

input[type=text] {
  display: none
}


  • 您可以使用
    显示
    属性而不是
    可见性

    input[type=text] {
      display: none
    }
    

  • 这将有助于:

    //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();
       }
    });
    
    这将有助于:

    //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();
       }
    });
    

    做得很好-它可以处理任意数量的字段,无需修改!这很好,但是不应该将输入框设置为隐藏在css中。默认情况下,您应该在页面加载时在javascript中隐藏它们,以便在关闭javascript的情况下将其降级为可用形式。@Jeff是的,您是正确的,在页面加载时添加类比阻止禁用js的用户查看输入要好。您展示了一种出色的方法,当我试图在我的jsp页面中实现它时,我无法实现它。在一个分区中,我正在使用这段代码。如果您想共享任何输入。@未定义,我可以请您看看另一个css,jquery问题:做得很好-它也可以在不修改的情况下处理任意数量的字段!这很好,但是不应该将输入框设置为隐藏在css中。默认情况下,您应该在页面加载时在javascript中隐藏它们,以便在关闭javascript的情况下将其降级为可用形式。@Jeff是的,您是正确的,在页面加载时添加类比阻止禁用js的用户查看输入要好。您展示了一种出色的方法,当我试图在我的jsp页面中实现它时,我无法实现它。在一个分区中,我正在使用这段代码。如果您想共享任何输入。@未定义,我可以请您看看其他css,jquery问题吗