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

时间：2023-02-01 09:29:33


<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不是很熟悉，哪位大哥指点下？

10 个解决方案

#1

<script type="text/javascript">
   $(document).ready(function() {
      $("input:text").click(function(){
        $("#Label1").html($(this).attr("title"));
   })
})
添加一下jquery引用

#2

<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>

#3

引用 1 楼  的回复:
<script type="text/javascript">
  $(document).ready(function() {
  $("input:text").click(function(){
  $("#Label1").html($(this).attr("title"));
  })
})
添加一下jquery引用

好像不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

#4

自己再优化下写个方法
 <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>

#5

引用 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>
……

大哥你这个方法也不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

#6

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

#7

<script type="text/javascript">
        function mytit(id)
        {
            if (document.getElementById('Label1').innerHTML.indexOf(document.getElementById(id).title)<1)
            {
                document.getElementById('Label1').innerHTML += document.getElementById(id).title;
            }
            alert(document.getElementById('Label1').innerHTML.indexOf(document.getElementById(id).title));
        }

</script>
</head>
<body>
<input type="text" id="t1p1z11" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"/></td>
<input type="text" id="t1p1z9" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排9座" readonly="readonly"/></td>
<input type="text" id="t1p1z7" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排7座" readonly="readonly"/></td>
<label id="Label1"   onclick="this.innerHTML=''" > </label>


包退，包邮

#8

<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>

已测试通过。

#9

引用 1 楼  的回复:
<script type="text/javascript">
  $(document).ready(function() {
  $("input:text").click(function(){
  $("#Label1").html($(this).attr("title"));
  })
})
添加一下jquery引用

虽然，没全部解决我的问题，但还是谢谢你给的思路，已经解决了

#10

$(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));
                }
            })
        });

#1

<script type="text/javascript">
   $(document).ready(function() {
      $("input:text").click(function(){
        $("#Label1").html($(this).attr("title"));
   })
})
添加一下jquery引用

#2

<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>

#3

引用 1 楼  的回复:
<script type="text/javascript">
  $(document).ready(function() {
  $("input:text").click(function(){
  $("#Label1").html($(this).attr("title"));
  })
})
添加一下jquery引用

好像不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

#4

自己再优化下写个方法
 <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>

#5

引用 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>
……

大哥你这个方法也不行啊，只能显示一个input type="text"的title，点击多个的话只显示最后点击的那个，而且再次点击已经点击过的input type="text"，也不会去掉对应的title

#6

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

#7

<script type="text/javascript">
        function mytit(id)
        {
            if (document.getElementById('Label1').innerHTML.indexOf(document.getElementById(id).title)<1)
            {
                document.getElementById('Label1').innerHTML += document.getElementById(id).title;
            }
            alert(document.getElementById('Label1').innerHTML.indexOf(document.getElementById(id).title));
        }

</script>
</head>
<body>
<input type="text" id="t1p1z11" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排11座" readonly="readonly"/></td>
<input type="text" id="t1p1z9" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排9座" readonly="readonly"/></td>
<input type="text" id="t1p1z7" onclick="mytit(this.id);" runat="server" class="imgbutton" value="0" title="1厅1排7座" readonly="readonly"/></td>
<label id="Label1"   onclick="this.innerHTML=''" > </label>


包退，包邮

#8

<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>

已测试通过。

#9

引用 1 楼  的回复:
<script type="text/javascript">
  $(document).ready(function() {
  $("input:text").click(function(){
  $("#Label1").html($(this).attr("title"));
  })
})
添加一下jquery引用

虽然，没全部解决我的问题，但还是谢谢你给的思路，已经解决了

#10

$(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));
                }
            })
        });
标签：

相关文章