使用jQuery模拟复选框悬停效果

Question

How would I simulate the effect that happens to a checkbox when you hover over it using jQuery? When you do this in Chrome and Firefox, the checkbox input is highlighted blue.

To give a bit more context, I have a grid like so:

<table>
    <tbody>
        <tr>
            <td><input type="checkbox" /></td>
            <td>this is a checkbox</td>
        </tr>
    </tbody>
</table

I want to make it that the checkbox is highlighted the default blue colour when a user hovers over the <tr>

I realise I could put a label around this is a checkbox and reference the checkbox with the for attribute, however I would rather trigger this effect on hover over the <tr> .

I'm a bit suspicious about using CSS to style the checkbox input itself as it seems a bit hacky.

Answer 1

/edit after your edit: Some browsers (like Opera) seem to allow you to do things like padding-right:100px so that hovering the mouse near the checkbox would highlight the checkbox as well. You can try waste some time with that, but I'd highly recommend you do it with libraries.

That blueish hover sort of thing is from the operating system. Only imaginable way would've been to focus it but obviously it doesn't work.

You can do what we've all been doing for the past decade, turn checkboxes into hidden inputs and use images. Plenty of libraries out there.

Here's one .

Answer 2

I'd say your best bet for looks consistency is to replace the checkbox with your own crafted checkbox. 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');
});

Answer 3

Mr. ajbeaven, meet the <label> tag! ;-)

ANSWER: http://jsfiddle.net/wh5N9/76/
No javascript, just HTML ...

Any mouse action done to a label will reflect on its checkbox (this includes hovering, and clicking).

The <label> tag defines a label for an element.

The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users , because if the user clicks on the text within the <label> element, it toggles the control.

The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

You would just need to match the checkbox id inside the label's "for" attribute, as seen 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 it can be as high or as wide as you want it to be, and fit right inside that tr of yours.

I was able to target checkbox clicking on a tr click using jQuery, but not simulate its hovering effect. Thus, I had to fall back on the <label> .