javascript - Simulate checkbox hover effect with jQuery - Stack Overflow

admin管理员组

文章数量:1390497

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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 19, 2012 at 4:08 ajbeaven asked Mar 19, 2012 at 3:57 ajbeavenajbeaven 9,5821313 gold badges8383 silver badges128128 bronze badges 3

• 2 Whhy do you want to simulate it if it already does it? Checkboxes are SO dependent, it'll look different in mac linux etc... – elclanrs Commented Mar 19, 2012 at 4:00
• @Fresheyeball I've given some more detail in the question. – ajbeaven Commented Mar 19, 2012 at 4:03
• You can use icon fonts and spans to replace the checkbox like I do in my plugin here code.google./p/idealforms – elclanrs Commented Mar 19, 2012 at 4:07

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

/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 remend 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.

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/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');
});

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

ANSWER: http://jsfiddle/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>.

本文标签： javascriptSimulate checkbox hover effect with jQueryStack Overflow