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

时间:2018-02-01 19:01:08

标签: javascript jquery html forms

我的第二个单选按钮按预期工作。我试图让我的第一个单选按钮(商家名称)在选中时隐藏第二个输入字段。



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>
&#13;
&#13;
&#13;

5 个答案:

答案 0 :(得分:0)

在这里,我进行了一些编辑,以便您可以查看哪个输入,然后在检查业务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>

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

您可能希望同时更新这两个字段。

Route::get('{any?}', function ($any) {
    ...
})->where('any', '.*');

答案 3 :(得分:0)

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

您的方法

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

当您选择了radiobutton field1时,您尝试使用$('#field1').css('display', 'block');进行隐藏。您要做的是设置display: none

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

您已经检查过radiobutton field1,可能您不希望这样:

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

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

&#13;
&#13;
function formChoice(x) {
  if (x == 0)
    $('#field2').css('display', 'none');
  else
    $('#field2').css('display', 'block');
  return;
}
&#13;
<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>
&#13;
&#13;
&#13; 看到?现在你的逻辑运作良好: - )

答案 4 :(得分:0)

您需要像这样修复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>