php显示隐藏文本框
发布网友
发布时间：2022-04-26 14:43
共3个回答
热心网友
时间：2022-04-06 04:44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<Script type="text/javascript" src="jquery库文件，没有自己去百度一个"></script>
<script type="text/javascript">
<!--
var Num = 1, A;
$(document).ready(function(e) {
A = $('a#ZJ');
var Div = $('div#input');
A.click(function(){
Num++;
Div.append('<div class="a1" id="a' + Num + '"><input type="text" name="text" value="" \/><a href="#" onclick="del($(\'#a' + Num + '\'))">删除</a><\/div>');
if ( Num >= 9 ) {
A.hide();
}
return false;
});
});
function del( obj ){
Num--;
obj.remove();
A.show();
}
//-->
</script>
<style type="text/css">
<!--
a{color:#03C; text-decoration:none;}
div.a1{position:relative;z-index:0; height:25px;}
-->
</style>
</head>
<body>
<div id="input">
<div class="a1" id="a1">
<input type="text" value="" name="text" />
</div>
</div>
<a href="#" id="ZJ">增加文本框</a>
</body>
</html>
效果如下图：
热心网友
时间：2022-04-06 06:02
热心网友
时间：2022-04-06 07:37
首先在head中引用JQUERY 。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
测试原文如下仅供参考。在线测试成功。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
//复选框1单击事件
$("#check1").click(function(){
if ($(this).attr("checked")=="checked"){
//选中就在id是div1的div容器中添加一个文本框，并设置该文本框id为text1
$("#div1").append("<input id=\"text1\" type=\"text\" value=\"text1\"/>");
}else{
$("#text1").remove(); //取消选中，就删除id为text1的文本框
}});
//复选框2单击事件
$("#check2").click(function(){
if ($(this).attr("checked")=="checked"){
$("#div2").append("<input id=\"text2\" type=\"text\" value=\"text2\"/>");
}else{
$("#text2").remove();
}});
//复选框3单击事件
$("#check3").click(function(){
if ($(this).attr("checked")=="checked"){
$("#div3").append("<input id=\"text3\" type=\"text\" value=\"text3\"/>");
}else{
$("#text3").remove();
}});
//复选框4单击事件
$("#check4").click(function(){
if ($(this).attr("checked")=="checked"){
$("#div4").append("<input id=\"text4\" type=\"text\" value=\"text4\"/>");
}else{
$("#text4").remove();
}});
//复选框5单击事件
$("#check5").click(function(){
if ($(this).attr("checked")=="checked"){
$("#div5").append("<input id=\"text5\" type=\"text\" value=\"text5\"/>");
}else{
$("#text5").remove();
}});
//复选框6单击事件
$("#check6").click(function(){
if ($(this).attr("checked")=="checked"){
$("#div6").append("<input id=\"text6\" type=\"text\" value=\"text6\"/>");
}else{
$("#text6").remove();
}});
});
</script>
</head>
<body>
<input id="check1" type="checkbox" />复选框1<div id="div1"></div><br />
<input id="check2" type="checkbox" />复选框2<div id="div2"></div><br />
<input id="check3" type="checkbox" />复选框3<div id="div3"></div><br />
<input id="check4" type="checkbox" />复选框4<div id="div4"></div><br />
<input id="check5" type="checkbox" />复选框5<div id="div5"></div><br />
<input id="check6" type="checkbox" />复选框6<div id="div6"></div><br />
</body>
</html>追问$("#div3").append("");在这些地方多加几个文本框，吧id改为class有没有影响
追答加多少个都行，无非就是多写几行append，你要是还要提交表单，别忘了用表单把他们包含在里面就ok了。
方法很笨。呵呵。
class是关键字，好像不行吧。你试试，不行了可以换的。呵呵
