javascript - jQuery: How to show a checkbox value on mouseover (without title attribute) -


i pretty new jquery , need following.

i have html page large, dynamic number of checkboxes , show checkbox' value on mouseover without having add title attribute in code each of them.

also, value of checkbox can different text shown next (label). checkboxes in div class '.divcheck' , above applies checkboxes in these divs (all set same way).

so far have following works intended seems slow (at least in test environment).

is there faster / better way achieve or can written different (either jquery or html) make run faster ?

my html (simplified):

<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> 

my jquery:

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

many help, mike

there no need use event handler, can set title programatically like

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


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -