选择单选按钮时隐藏特定的表单输入

Question

我的第二个单选按钮按预期工作。 我试图让我的第一个单选按钮（公司名称）在被选中时隐藏第二个输入字段。

 function formChoice(x) { if(x==0) $('#field1').css('display', 'block'); else $('#field1').css('display', 'none'); return; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <h1> Trying to hide second input field when 'Business URL' is selected</h1> </head> <body> <form> <input type="radio" name="rad1" onclick="formChoice(0)" checked> Business URL <input type="text" name="businessSite" id="field1"> <input type="radio" name="rad1" onclick="formChoice(1)"> I don't have a website but here are some sites I like! <input type="text" name="businessSite" id="field2"> </form> 

Answer 1

在这里，我进行了一些编辑，以便可以看到哪个输入是哪个输入，然后在检查企业URL广播时也隐藏了“输入2”。

 function formChoice(x) { if(x==0) $('#field2').css('display', 'none'); else $('#field2').css('display', 'block'); return; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <head> <h1> Trying to hide second input field when 'Business URL' is selected</h1> </head> <body> <form> <input type="radio" name="rad1" onclick="formChoice(0)"> Business URL <input type="text" name="businessSite" id="field1" value ="input1"> <input type="radio" name="rad1" onclick="formChoice(1)"> I don't have a website but here are some sites I like! <input type="text" name="businessSite" id="field2" value="input2"> </form> 

Answer 2

function formChoice(x)
{
  if(x==0) {
    $('#field1').css('display', 'block');
    $('#field2').css('display', 'none');
  } else {
    $('#field1').css('display', 'none');
    $('#field2').css('display', 'block');
  }
  return;
}

Answer 3

首先，请检查您的jQuery导入是否正确。

您可能要一起更新两个字段。

function formChoice(x) { 
    if(x==0){
      $('#field1').show();
      $('#field2').hide();
    } else {
      $('#field1').hide();
      $('#field2').show();
    }
  }

Answer 4

您的代码几乎在执行正确的逻辑。

你的方法

function formChoice(x) {
  if(x==0)
    $('#field1').css('display', 'block');
  else
    $('#field1').css('display', 'none');
}

当选择单选按钮field1 ，您尝试使用$('#field1').css('display', 'block');隐藏 。 您要设置的display: none

$('#field1').css('display', 'block');
                             ^

您的单选按钮field1已被选中，可能您不希望这样做：

<input type="radio" name="rad1" onclick="formChoice(0)" checked>
                                                        ^

使用这些修复程序查看此代码段

 function formChoice(x) { if (x == 0) $('#field2').css('display', 'none'); else $('#field2').css('display', 'block'); return; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1> Trying to hide second input field when 'Business URL' is selected</h1> <form> <input type="radio" name="rad1" onclick="formChoice(0)"> Business URL<br> <input type="text" name="businessSite" id="field1"><br> <input type="radio" name="rad1" onclick="formChoice(1)"> I don't have a website but here are some sites I like!<br> <input type="text" name="businessSite" id="field2"> </form> 

看到？ 现在您的逻辑运行良好:-)

Answer 5

您需要像这样修复formChoice以使其响应参数：

function formChoice(x)
{
    $('#field' + x).css('display', 'block');
}

并将正确的值传递给html时：

<head>
<h1> Trying to hide second input field when 'Business URL' is selected</h1>
</head>
<body>
  <form>
  <input type="radio" name="rad1" onclick="formChoice(2)" checked> Business URL
    <input type="text" name="businessSite" id="field1">
  <input type="radio" name="rad1" onclick="formChoice(1)"> I don't have a website but here are some sites I like!
    <input type="text" name="businessSite" id="field2">
  </form>