如何隱藏表單的一部分並僅在點擊「添加另一個」按鈕時纔可見？

請注意，點擊按鈕後，多個文本框會變得可見，而不僅僅是一個！如何隱藏表單的一部分並僅在點擊「添加另一個」按鈕時纔可見？

2014-01-18 user3205736

我還有一個問題，你應該在你的描述：是否有可能「添加另一個「按鈕被點擊多在第一次和第二次點擊後（如果可能的話）會發生什麼？ – Minister

@Minister，如果_you_有問題，最好是如果你在SO上開始一個新的問題。 – ZaLiTHkA

@ZaLiTHkA，這是對上述問題的澄清問題（不是另一個問題）。我想象一個帶有文件字段的表單，其中有「添加另一個」按鈕，因此您可以添加更多文件（例如，文件字段+多行文件標題）。這就是要求'user3205736'澄清問題的原因，以防下面的答案無助於找到合適的解決方案。（對不起，如果我的英語太窮，而且在我的第一條評論中還不清楚） – Minister

把形式的容器內
將容器的CSS來display:none
建立一個單擊處理某些元素上觸發jQuery的顯示/隱藏方法

您的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/

來源

2014-01-18 09:43:46 Stuart

非常感謝你！：）有效：） – user3205736

這裏是您的情況簡單的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>

來源

2014-01-18 09:40:28

非常感謝你！ :) – user3205736

試試這個

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;" />

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

來源

2014-01-18 09:44:32

如何隱藏表單的一部分並僅在點擊「添加另一個」按鈕時纔可見？

回答

相關問題