如何自定义复选框，添加背景图片 [英] How to customize the checkbox , add a background image

问题描述

我需要将默认复选框转换为

可以使用任何内容，背景图片，CSS3，jQuery。

。

您可以在这个小提琴。

I need to convert the default checkbox to this

It's ok to use anything, A background image, CSS3, jQuery.

http://jsfiddle.net/jitendravyas/uGYv6/

解决方案

If you're not against using an existing toolkit, jQuery UI Button can turn check boxes into custom-styled buttons that support the four basic visual states (plus one more hover state):

However, to be able to use that feature the way you want (using the value attribute as the label), you'll have to give id attributes to your check boxes, and add <label> elements that refer to these ids and expose their check box's value as their inner text. You can either change your markup by hand:

<input type="checkbox" id="nutri" name="nutri" value="select">
<label for="nutri">select</label>

Or modify it dynamically:

$("input:checkbox").each(function(index) {
    $("<label>").text(this.value)
                .attr("for", this.id = "checkbox" + index + 1)
                .insertAfter(this);
});

From there on, it's as simple as calling button() on the check box or buttonset() on a container. Of course, if none of the default jQuery UI themes are appropriate for your project, you can design your own style for each visual state with ThemeRoller.

You can find a live demo in this fiddle.

这篇关于如何自定义复选框，添加背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！