Question

请注意，点击该按钮后，多个文本字段框变为可见，而不仅仅是一个！

Answer 1

这是一个简单的jQuery适合您的情况：

<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    input[type='text']
    {
      display: none;
    }
  </style>
</head>
<body>
  <form id='frm1'>
    <input type='text' />
    <input type='text' />
    <input type='text' />
    <button id='btnShowInputs'>Show Inputs</button>

  </form>
  <script>
      $("#btnShowInputs").click(function () {
          $("#frm1 input[type='text']").css("display", "block");
      });
  </script>
</body>
</html>

Answer 2

将表单放入容器
将容器的CSS设置为display:none
在触发jQuery的show / hide方法的某个元素上设置单击处理程序

您的HTML：

<a id="toggleform" href="#">Toggle Form</a>
<div id="hideform">
    // form elements in here
</div>

你的javascript：

$( "#toggleform" ).on( "click", function() {
  $('#hideform').toggle();
});

或者，如果您不想切换隐藏：

$( "#toggleform" ).on( "click", function() {
  $('#hideform').show();
});

你的CSS：

#hideform {display:none;}

这是一个演示它的小提琴：http://jsfiddle.net/AkHQa/

Answer 3

试试这个

<强> HTML

<input type="button" onclick="javascript:show_text_boxes();" value="Show Textboxes" />
<input type="button" onclick="javascript:hide_text_boxes();" value="Hide Textboxes" />

<input type="text" id="textbox1" name="textbox1" style="display:none;"/>
<input type="text" id="textbox2" name="textbox2" style="display:none;" />
<input type="text" id="textbox3" name="textbox3" style="display:none;" />

<强> JS

function show_text_boxes()
{

    document.getElementById('textbox1').style.display='block';
    document.getElementById('textbox2').style.display='block';
    document.getElementById('textbox3').style.display='block';

}

function hide_text_boxes()
{

    document.getElementById('textbox1').style.display='none';
    document.getElementById('textbox2').style.display='none';
    document.getElementById('textbox3').style.display='none';

}

SEE FIDDLE

如何隐藏表单的一部分并仅在单击“添加另一个”按钮时才可见？

3 个答案: