jQuery：如何在鼠标悬停时显示复选框值（没有标题属性）答案

【问题标题】：jQuery: How to show a checkbox value on mouseover (without title attribute)jQuery：如何在鼠标悬停时显示复选框值（没有标题属性）
【发布时间】：2015-06-01 05:50:12
【问题描述】：

我对 jQuery 还很陌生，需要以下方面的帮助。

我有一个带有大量动态复选框的 HTML 页面，并且希望 在鼠标悬停时显示复选框的值，而不必在代码中为每个复选框添加标题 属性。

此外，复选框的值可能与显示在她（标签）旁边的文本不同。复选框始终位于类 '.divCheck' 的 div 中，上述内容适用于这些 div 中的所有复选框（均以相同方式设置）。

到目前为止，我有以下按预期工作但似乎很慢（至少在我的测试环境中）。

是否有更快/更好的方法来实现这一点，或者可以用不同的方式编写（jQuery 或 HTML）以使其运行更快？

我的 HTML（简体）：

<div class="divCheck">
    <input type="checkbox" name="language" class="checkSingle" id="language1" value="de - German" />
        <label for="language1">de</label>
    <input type="checkbox" name="language" class="checkSingle" id="language2" value="en - English" />
        <label for="language2">en</label>
    <input type="checkbox" name="language" class="checkSingle" id="language3" value="es - Spanish" />
        <label for="language3">en</label>
    <!-- ... -->
</div>

我的 jQuery：

$('div.divCheck label').on('mouseover', function(){
    var checkID = $(this).attr('for');
    var checkVal = $('#'+checkID).val();
    $(this).prop('title', checkVal);
});

非常感谢您的帮助，迈克

【问题讨论】：

标签： javascript jquery mouseover title

【解决方案1】：

不需要使用事件处理程序，您可以像这样以编程方式设置标题

$('div.divCheck label').attr('title', function(){
    return $(this).prev('input').val()
});

$('div.divCheck label').attr('title', function() {
  return $(this).prev('input').val()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divCheck">
  <input type="checkbox" name="language" class="checkSingle" id="language1" value="de - German" />
  <label for="language1">de</label>
  <input type="checkbox" name="language" class="checkSingle" id="language2" value="en - English" />
  <label for="language2">en</label>
  <input type="checkbox" name="language" class="checkSingle" id="language3" value="es - Spanish" />
  <label for="language3">en</label>
</div>

【讨论】：

非常感谢 - 这正是我想要的！我会尽快接受。 :) 最后一个问题：我也可以使用 .prop 作为标题吗？不久前我开始改用这个，因为我认为它是较新的标准。
谢谢，阿伦！完美运行。

【解决方案2】：

qtip 等工具提示库可以帮助您

【讨论】：

我尽量避免添加额外的库，但谢谢。

【解决方案3】：

您可以将复选框的title 属性设置为值。这样，您就不需要任何库/插件。

$(':checkbox').prop('title', function() {
    return $(this).val();
});

演示：https://jsfiddle.net/zstupsbc/

【讨论】：

也谢谢你！