Question

我在下面的表格中有不同的复选框。我想将一个复选框悬停以通过TextTool Tip显示一个复选框的名称，id和值。

$('td label').attr('id', function() {
  return $(this).prev('input').val()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td> <input type="checkbox" id="A1" name="Seat" value="50" /> <label for="A1" class="myseats">A1 </td>
 <td> <input type="checkbox" id="A2" name="Seat2" value="20" /><label for="A2" class="myseats"> A2</td> </tr>

 <tr> 
<td> <input type="checkbox"  id="B1" name="Seat3" value="35" /><label for="B1" class="myseats">B1 </td> <td> <input type="checkbox" id="B2" name="Seat4" value="210" /><label for="B2" class="myseats"> B2</td> </tr> </table>

非常感谢您的帮助。

Answer 1

这将为您工作：

我已经使用.hover来达到此效果。

$('[type="checkbox"]').hover(function() {
  var id = $(this).attr('id'),
    name = $(this).attr('name'),
    value = $(this).val();
  console.log(id, name, value)
}, function() {
  //hover out function if you need. remove this function if you dont neeed that.
  console.log('hovered out')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td> <input type="checkbox" id="A1" name="Seat" value="50" /> <label for="A1" class="myseats">A1 </label></td>
    <td> <input type="checkbox" id="A2" name="Seat2" value="20" /><label for="A2" class="myseats"> A2</label></td>
  </tr>

  <tr>
    <td> <input type="checkbox" id="B1" name="Seat3" value="35" /><label for="B1" class="myseats">B1 </label></td>
    <td> <input type="checkbox" id="B2" name="Seat4" value="210" /><label for="B2" class="myseats"> B2</label> </td>
  </tr>
</table>

您的表结构缺少一些标记关闭。

Answer 2

一种无需查看控制台或不弹出提示即可显示所需值的方法。

4th

$('[type="checkbox"]').mouseover(function() {
  let $this = $(this),
         id = "id:" + $this.attr('id'),
       name = "name:" + $this.attr('name'),
      value = "value:" + $this.val(),
         br = "\r\n";
  $this.attr("title", id + br + name + br + value);
})

Answer 3

尝试一下

$('input:checkbox').on('mouseover',function(){
   this.title= this.id + this.name +this.value;
   console.log(this.id, this.name, this.value);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td> <input type="checkbox" id="A1" name="Seat" value="50" /> <label for="A1" class="myseats">A1 </td>
 <td> <input type="checkbox" id="A2" name="Seat2" value="20" /><label for="A2" class="myseats"> A2</td> </tr>

 <tr> 
<td> <input type="checkbox"  id="B1" name="Seat3" value="35" /><label for="B1" class="myseats">B1 </td> <td> <input type="checkbox" id="B2" name="Seat4" value="210" /><label for="B2" class="myseats"> B2</td> </tr> </table>

Answer 4

$(function(){
$("input[type=checkbox]").hover(function(e){
  e.stopPropagation();
  alert("name: " + $(this).attr('name') + " id:" + $(this).attr('id') + " value:" + $(this).val());
});
$('td label').attr('id', function() {
  return $(this).prev('input').val()
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td> <input type="checkbox" id="A1" name="Seat" value="50" /> <label for="A1" class="myseats">A1 </td>
 <td> <input type="checkbox" id="A2" name="Seat2" value="20" /><label for="A2" class="myseats"> A2</td> </tr>

  <tr> 
<td> <input type="checkbox"  id="B1" name="Seat3" value="35" /><label for="B1" class="myseats">B1 </td>
<td> <input type="checkbox" id="B2" name="Seat4" value="210" /><label for="B2" class="myseats"> B2</td>
  </tr>
</table>

Answer 5

$('td label').attr('id', function() {
  return $(this).prev('input').val()
});
   
 function myFunc(ele){
var checkb = $(ele).parent().find('input:checkbox:first');
        alert(checkb.attr('id')+':'+checkb.attr('name')+':'+checkb.attr('value'));
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td > <input type="checkbox" id="A1" name="Seat" value="50" /> <label onmouseover="myFunc(this)" for="A1" class="myseats">A1 </td>
 <td> <input type="checkbox" id="A2" name="Seat2" value="20" /><label for="A2" class="myseats"> A2</td> </tr>

 <tr> 
<td> <input type="checkbox"  id="B1" name="Seat3" value="35" /><label for="B1" class="myseats">B1 </td> <td> <input type="checkbox" id="B2" name="Seat4" value="210" /><label for="B2" class="myseats"> B2</td> </tr> </table>

悬停时显示复选框ID，名称和值

5 个答案: