请教一个input type="text"和Label问题

baibai620 2012-08-16 04:27:46



<td><input type="text" id="t1p1z11" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"></td>

<td><input type="text" id="t1p1z9" runat="server" class="imgbutton" value="0" title="1厅1排9座" readonly="readonly"></td>

<td><input type="text" id="t1p1z7" runat="server" class="imgbutton" value="0" title="1厅1排7座" readonly="readonly"></td>

<label id="Label1"></label>

请教如何点击一次input type="text"就在label里显示对应的title，再点击一次label就去掉对应的title，我知道要用JS，但我对JS不是很熟悉，哪位大哥指点下？

...全文

336 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

观光客 2012-08-17

打赏
举报

$(document).ready(function() {
var reslut = "";

$(".imgbutton").click(function() {
if ($.inArray($(this).attr("title"), reslut.split(",")) < 0) {
reslut += $(this).attr("title") + ",";
$("#Label1").html(reslut.substring(0, reslut.length - 1));
}
else {
reslut = reslut.replace($(this).attr("title")+",", "");
$("#Label1").html(reslut.substring(0, reslut.length - 1));
}
})
});

baibai620 2012-08-17

打赏
举报

[Quote=引用 1 楼的回复:]
<script type="text/javascript">
$(document).ready(function() {
$("input:text").click(function(){
$("#Label1").html($(this).attr("title"));
})
})
添加一下jquery引用
[/Quote]
虽然，没全部解决我的问题，但还是谢谢你给的思路，已经解决了

happytonice 2012-08-16

打赏
举报

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {
$(".imgbutton").click(function(){
$("#Label1").html($(this).attr("title"));
})
})

</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><input type="text" id="t1p1z11" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"></td>
<td><input type="text" id="t1p1z9" runat="server" class="imgbutton" value="0" title="1厅1排9座" readonly="readonly"></td>
<td><input type="text" id="t1p1z7" runat="server" class="imgbutton" value="0" title="1厅1排7座" readonly="readonly"></td>
</tr>
</table>
<label id="Label1"></label>
</form>
</body>
</html>

已测试通过。

phoebuswei 2012-08-16

打赏
举报

baibai620 2012-08-16

打赏
举报

补充下，如果点击2个或2个以上的input type="text"，label里面显示的是1厅1排11座,1厅1排9座,1厅1排7座

baibai620 2012-08-16

打赏
举报

[Quote=引用 2 楼的回复:]
HTML code

<td><input type="text" onclick="document.getElementById('Label1').innerHTML=this.title" id="t1p1z11" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"></td>
……
[/Quote]
大哥你这个方法也不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

wangyizhi58 2012-08-16

打赏
举报

自己再优化下写个方法
<script language="JavaScript" type="text/JavaScript">
var t1p1z11=0;
var t1p1z9=0;
var t1p1z7=0;
document.getElementById('t1p1z11').onclick=function(){
if(t1p1z11%2==0)
{
this.value=this.title;
}
else
{
this.value="0";
}
t1p1z11++;
}
document.getElementById('t1p1z9').onclick=function(){
if(t1p1z9%2==0)
{
this.value=this.title;
}
else
{
this.value="0";
}
t1p1z9++;
}
document.getElementById('t1p1z7').onclick=function(){
if(t1p1z7%2==0)
{
this.value=this.title;
}
else
{
this.value="0";
}
t1p1z7++;
}
</script>

baibai620 2012-08-16

打赏
举报

[Quote=引用 1 楼的回复:]
<script type="text/javascript">
$(document).ready(function() {
$("input:text").click(function(){
$("#Label1").html($(this).attr("title"));
})
})
添加一下jquery引用
[/Quote]
好像不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

孟子E章 2012-08-16

打赏
举报

<td><input type="text" onclick="document.getElementById('Label1').innerHTML=this.title" id="t1p1z11" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"></td>

<td><input type="text"  onclick="document.getElementById('Label1').innerHTML=this.title" id="t1p1z9" runat="server" class="imgbutton" value="0" title="1厅1排9座" readonly="readonly"></td>

<td><input type="text" onclick="document.getElementById('Label1').innerHTML=this.title"  id="t1p1z7" runat="server" class="imgbutton" value="0" title="1厅1排7座" readonly="readonly"></td>

<label id="Label1"  onclick="this.innerHTML=''" ></label>