Question

我的复选框很少。当我将鼠标悬停在它们上面时，我想显示属于这些复选框的一些信息。我如何使用JS或JQuery做到这一点？假设这是我的复选框

 <input type="checkbox" value="monday" checked="checked">

我想向用户显示“Hello User或值'monday'或我的数据库中的一些数据。怎么样？

Answer 1

只需在HTML对象中添加“title”属性即可。

<input title="Text to show" id="chk1" type="checkbox" value="monday" checked="checked" />

或在JavaScript中

document.getElementById("chk1").setAttribute("title", "text to show");

或者在jQuery中

$('#chk1').attr('title', 'text to show');

Answer 2

您可以使用属性标题和步骤渲染添加数据库中的标题值

 input type='checkbox' title='tooltip 2'

您可以使用js插件（您需要添加已重新加载的文本的值作为属性，请参阅文档） http://onehackoranother.com/projects/jquery/tipsy/

Answer 3

这是你的答案：

<input type="checkbox" value="monday" checked="checked">
  <div>informations</div>

和css：

input+div{display:none;}
input:hover+div{display:inline;}

您有一个示例here

Answer 4

使用类似的html结构：

<div class="checkboxContainer">
    <input type="checkbox" class="checkboxes"> Checkbox 1
    <div class="infoCheckbox">
        <p>Info on checkbox 1</p>
    </div>
</div>
<div class="checkboxContainer">
    <input type="checkbox" class="checkboxes"> Checkbox 2
    <div class="infoCheckbox">
        <p>Info on checkbox 2</p>
    </div>
</div>
<div class="checkboxContainer">
    <input type="checkbox" class="checkboxes"> Checkbox 3
    <div class="infoCheckbox">
        <p>Info on checkbox 3</p>
    </div>
</div>

您可以使用jQuery的“this”处理程序轻松显示文本，该处理程序引用当前元素：

$(".checkboxContainer").hover(
    function() {
        $(this).find(".infoCheckbox:first").show();
    },
    function() {
        $(this).find(".infoCheckbox:first").hide();
    }
);

在这里演示：http://jsfiddle.net/pdRX2/

Answer 5

<input type="checkbox" id="cb" value="monday" checked="checked">

$("#cb").hover(
   function() {
      // show info
   },
   function() {
      // hide info
   }
);

或者你可以只为你的元素添加title属性

Answer 6

采取快速粗暴刺（没有测试或任何东西，并没有完全理解你想要的东西......更不用说你实际尝试过的东西......也许是某种程度上的东西..

$('input:checkbox').mouseover(function()
{
   /*code to display whatever where ever*/
   //example
   alert($(this).val());
}).mouseout(function()
{
   /*code to hide or remove displayed whatever where ever*/
});

当然有很多方法可以做同样的事情，从使用toggle()的东西到像on()

这样的东西

如何在复选框上悬停时显示一些信息？

6 个答案: