Simulate checkbox binding effect using jQuery
How would I simulate the effect that happens to a checkbox when I hover over it using jQuery? When you do this in Chrome and Firefox, the checkbox will be highlighted in blue.
To give a little more context, I have a grid like this:
<table>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>this is a checkbox</td>
</tr>
</tbody>
</table
I want the checkbox to be highlighted in blue by default when the user hovers over <tr>
I understand that I can put a shortcut around this is a checkbox
and reference this checkbox with the attribute for
, however I would prefer to activate this effect on hover over <tr>
.
I am a little wary of using CSS to style the checkbox itself as it seems a little hacky.
source to share
/ edit after editing. Some browsers (like Opera) seem to allow you to do things like padding-right:100px
so that when you hover your mouse next to that checkbox the checkbox will be highlighted. You can spend some time on this, but I highly recommend you do it using libraries.
This bluish type hangs on the operating system. The only imaginary way would be to focus him, but obviously it didn't work.
You can do what we have all done for the last decade, turn flags into hidden entrances, and use imagery. There are many libraries out there.
source to share
I would say your best bet for stability looks to be to replace the checkbox with your own handler. I extracted and edited this from a plugin I made a while ago.
Demo: http://jsfiddle.net/elclanrs/jTteE/
HTML:
<label><input type="checkbox">Hey</label>
CSS
input[type="checkbox"] {
position: absolute;
margin-left: -9999px;
}
.check {
position: relative;
display: inline-block;
vertical-align: top;
margin-right: .5em;
width: 1.1em;
height: 1.1em;
background: #ddd;
}
.check:hover {
background: pink;
}
.check.checked {
background: red;
}
.check.checked:after {
content: "\2713";
position: absolute;
font-size: 22px;
font-weight: bold;
line-height: 16px;
top: 0;
z-index: 999;
color: white;
}
JS:
// Check
$('input:checkbox').each(function() {
$(this).before('<span class="check"></span>');
if ($(this).is(':checked')) {
$(this).prev('span').addClass('checked');
}
}).change(function() {
$(this).prev('span').toggleClass('checked');
});
source to share
Mr. ajbeaven, meet the tag <label>
! ; -)
ANSWER: http://jsfiddle.net/wh5N9/76/
No javascript, just HTML ...
Any mouse action performed on the shortcut , will be displayed in its checkbox (this includes hover and click).
The tag
<label>
defines the label for the element.The element
<label>
does not display anything special to the user. However, it does provide a usability improvement for mouse users because if the user clicks on the text in the element<label>
, they toggle control.The for attribute of a tag
<label>
must be equal to the id attribute of the associated element in order to link them together.
You just need to map the checkbox id inside the label for the attribute like below:
<input type="checkbox" id="YAHOO"><label for="YAHOO">whatever whatever</label>
You can have as many labels for a checkbox, and style them with a fixed width and height, so that it can be as tall or wide as you want and fit right inside that tr of your.
I was able to set the checkbox by clicking on the click tr
using jQuery but not simulating its hover effect. So I had to go back on <label>
.
source to share