36

チェックボックスがほとんどありません。それらにカーソルを合わせている間、それらのチェックボックスに属するいくつかの情報を表示したいと思います。JS または JQuery を使用してそれを行うにはどうすればよいですか? これが私のチェックボックスだとします

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

ユーザーに「Hello User」または値「monday」またはデータベースからのデータを表示したいのですが、どのように?

4

6 に答える 6

52

HTML オブジェクトに「タイトル」属性を追加するだけです。

<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');
于 2013-01-16T14:48:19.230 に答える
14

属性titleを使用でき、ステップレンダリングでデータベースからtitleの値を追加します

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

jsプラグインを使用できます（再取得されたテキストの値を属性として追加する必要があります。ドキュメントを参照してください） http://onehackoranother.com/projects/jquery/tipsy/

于 2013-01-16T14:49:00.317 に答える
11

これがあなたの答えです：

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

そしてCSS：

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

ここに例があります

于 2013-01-16T14:51:42.430 に答える
3

そのような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/

于 2013-01-16T14:53:25.110 に答える
0 
<input type="checkbox" id="cb" value="monday" checked="checked">

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

または、要素にtitle属性を追加することもできます

于 2013-01-16T14:48:42.023 に答える
0

簡単な大雑把な刺し傷（テストされていないか何か、そしてあなたが望むものを完全に理解していない..あなたが実際に試したことは言うまでもなく..多分ある程度の何か..

$('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()

于 2013-01-16T14:48:45.283 に答える