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

Question

我在下面有这个表格，它有不同的复选框。我希望当复选框悬停以通过文本工具提示显示复选框的名称、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

一种显示所需值的方法，无需查看控制台或提醒弹出窗口。

$('[type="checkbox"]').mouseover(function() {
let $this = $(this),
id = "id:" + $this.attr('id'),
name = "name:" + $this.attr('name'),
value = "value:" + $this.val(),
br = "rn";
$this.attr("title", id + br + name + br + 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 </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

这将适用于您：

我用.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 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>