Question

我有这个简单的形式如下图所示。根据所选格式，单击时将显示相应的输入字段。

这是我到目前为止所拥有的。我在页面的两个不同位置有这个表单，所以它的编写方式就是这样。第一个功能有效但不是第二个功能。单击PDF时，它显示文件上载。单击链接时，它会隐藏文件上载但不显示文本字段。

HTML

感谢任何帮助或链接到有用的类似问题。感谢

*更新：我注意到了一些事情。首先是div，linkURL或uploadPDF，即将显示的那个。例如，如果linkURL是第一个输入将在单击时显示但不显示PDF文件上载的示例。

//Format check
$(".pdf").click(function() {
  if ($(this).prop("checked")) {
    $(this).parent().next(".uploadPDF").css("display", "inline-block");
    $(".linkURL").css("display", "none");
  }
});

$(".link").click(function() {
  if ($(this).prop("checked")) {
    $(this).parent().next(".linkURL").css("display", "inline-block");
    $(".uploadPDF").css("display", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form>
  <div class="form_left">
    <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
    <input id="document" name="document" type="text" />
  </div>
  <div class="form_right">
    <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br />
    <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
    <input type="radio" name="radio_Type" class="link" value="Link" /> Link
  </div>
  <div id="" class="form_left uploadPDF" style="display:none">
    <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
    <input type="file" name="fileToUploadPDF" id="fileToUploadPDF">
  </div>
  <div id="" class="form_left linkURL" style="display: none;">
    <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
    <input id="url" type="text" name="url" value="" />
  </div>
  <div>
    <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
  </div>
</form>

Answer 1

使用.siblings()

简化您的代码

工作代码段： -

＆＃13;

//Format check
$(".pdf").click(function() {
  if($(this).prop("checked")) {
    $(this).parent().siblings(".uploadPDF").css("display","inline-block");
    $(this).parent().siblings(".linkURL").css("display","none");
  }
});

$(".link").click(function() {
  if($(this).prop("checked")) {
    $(this).parent().siblings(".linkURL").css("display","inline-block");
    $(this).parent().siblings(".uploadPDF").css("display","none");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="form_left">
      <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
      <input id="document" name="document" type="text" />
  </div>
  <div class="form_right">
      <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br /> 
      <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
      <input type="radio" name="radio_Type" class="link" value="Link" /> Link
  </div>
  <div id="" class="form_left uploadPDF" style="display:none">
    <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
    <input type="file" name="fileToUploadPDF" id="fileToUploadPDF"> 
  </div>
  <div id="" class="form_left linkURL" style="display: none;">
      <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
      <input id="url" type="text" name="url" value=""/>
  </div>
  <div>
    <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
  </div>
</form>

＆＃13;

注意： -

如果您更改

，您的代码也会有效

$(this).parent().next(".linkURL");

到

$(this).parent().next().next(".linkURL");

Answer 2

我认为问题在于next（）函数。它只返回前一个元素（jQuery docs for Next），而.linkURL位于前一个元素之后，我会将其更改为兄弟元素（jQuery docs for Siblings)

＆＃13;

    $(".pdf").click(function() {
        if($(this).prop("checked")) {
            $(this).parent().next(".uploadPDF").css("display","inline-block");
            $(".linkURL").css("display","none");
        }
    });

    $(".link").click(function() {
      if($(this).prop("checked")) {
        $(this).parent().siblings(".linkURL").css("display","inline-block");
        $(".uploadPDF").css("display","none");
      }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
      <div class="form_left">
        <label for="document"><strong>Name:</strong> <span style="color: red;">*</span></label><br />
        <input id="document" name="document" type="text" />
      </div>
      <div class="form_right">
        <label for="type"><strong>Format:</strong> <span style="color: red;">*</span></label> <br /> 
        <input type="radio" name="radio_Type" class="pdf" value="PDF" /> PDF
        <input type="radio" name="radio_Type" class="link" value="Link" /> Link
      </div>
      <div id="" class="form_left uploadPDF" style="display:none">
        <label for="pdf"><strong>Attach PDF:</strong> <span style="color: red;">*</span></label><br/>
        <input type="file" name="fileToUploadPDF" id="fileToUploadPDF"> 
      </div>
      <div id="" class="form_left linkURL" style="display: none;">
        <label for="url"><strong>Link URL:</strong> <span style="color: red;">*</span></label><br/>
        <input id="url" type="text" name="url" value=""/>
      </div>
      <div>
        <input class="submitBtn" id="submit" name="submit" type="submit" value="Add">
      </div>
    </form>

＆＃13;

jQuery显示/隐藏表单字段

2 个答案: