ZH CEXO’s BLOG

使用jQuery制作精致的复选框（翻译）

关键字：jQuery, 教程, 翻译

最近我做的一个项目中需要用到复选框，但是默认的复选框界面显得不够友好，我想让它更具有吸引力。在这个简短的教程中，我将教大家把这个

变成这样

这种效果使用CSS和jQuery实现，你可以点击这里看到简单的DEMO演示。如果你是jQuery新手，可以参考一下官方的教程和资源。

现在你一定很激动了，那我们开始吧……

1、表单标记

<form>
	<fieldset>
		<label for="choices">
			<input name="jqdemo" value="value1" type="checkbox" /> Choice one
			<input name="jqdemo" value="value2" type="checkbox" /> Choice two
			<input name="jqdemo" value="value3" type="checkbox" /> Choice three
			<input name="jqdemo" value="value4" type="checkbox" /> Choice four
		</label>
		<br/><br/>
		<button type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

这样就很好，但我们还要加点东西，使用列表把复选框、内容和控制包覆起来

<form>
	<fieldset>
		<label for="choices">
			<ul class="checklist">
				<li>
					<input name="jqdemo" value="value1" type="checkbox" />
					<p>Here is the first selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value2" type="checkbox" />
					<p>Here is the second selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo" value="value3" type="checkbox" />
					<p>Here is the third selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
				<li>
					<input name="jqdemo"value="value4" type="checkbox" />
					<p>Here is the fourth selection</p>
					<a class="checkbox-select" href="#">Select</a>
					<a class="checkbox-deselect" href="#">Cancel</a>
				</li>
			</ul>
		</label>
		<div style="clear: both;"></div>
		<button class="sendit" type="submit" name="submitbutton" title="Submit the form" />Send it!
	</fieldset>
</form>

复选框依然保留，但我们不点它，选取/取消复选框的动作会由每个列表项目中的“Select”和“Cancel”来操作。

2、背景

每个列表项目都有已选取和未选取两种状态（分别用绿色和灰色标示），我们可以把它们的背景合并到一张图片上，然后改变背景的位置进行切换标示复选框的状态。启动Photoshop制作以下的图片：

列表项目宽105px，高150px，所以制作出来的checkboxbg.gif应该有210px宽（两倍于原宽度）。当处于被选取状态时，就将背景向左移动105px将绿色展示出来，我们用CSS来实现这个比较容易，而sendit.gif和select.gif分别用于提交按钮的背景和已选取状态的背景。

3、CSS

.checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.checklist li {
	float: left;
	margin-right: 10px;
	background: url(i/checkboxbg.gif) no-repeat 0 0;
	width: 105px;
	height: 150px;
	position: relative;
	font: normal 11px/1.3 "Lucida Grande","Lucida","Arial",Sans-serif;
}

.checklist li.selected {
	background-position: -105px 0;
}

.checklist li.selected .checkbox-select {
	display: none;
}

.checkbox-select {
	display: block;
	float: left;
	position: absolute;
	top: 118px;
	left: 10px;
	width: 85px;
	height: 23px;
	background: url(i/select.gif) no-repeat 0 0;
	text-indent: -9999px;
}

.checklist li input {
	display: none;
}

a.checkbox-deselect {
	display: none;
	color: white;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: 120px;
	right: 10px;
}

.checklist li.selected a.checkbox-deselect {
	display: block;
}

.checklist li p {
	text-align: center;
	padding: 8px;
}

.sendit {
	display: block;
	float: left;
	top: 118px;
	left: 10px;
	width: 115px;
	height: 34px;
	border: 0;
	cursor: pointer;
	background: url(i/sendit.gif) no-repeat 0 0;
	text-indent: -9999px;
	margin: 20px 0;
}

就像我上面提到的，为列表项目加上selected类实现翻转背景图片的效果，隐藏“Select”链接并显示“Cancel”链接，复选框同样被完全隐藏（但在表单标记中要用到它）。

4、jQuery

用jQuery把以上的制作合并到一起：

$(document).ready(function() {
	$(".checklist .checkbox-select").click(
		function(event) {
			event.preventDefault();
			$(this).parent().addClass("selected");
			$(this).parent().find(":checkbox").attr("checked","checked");
		}
	);

	$(".checklist .checkbox-deselect").click(
		function(event) {
			event.preventDefault();
			$(this).parent().removeClass("selected");
			$(this).parent().find(":checkbox").removeAttr("checked");
		}
	);

});

第2行

这个选择器选择所有绿色的“Select”按钮并为单击事件指派一个脚本

第4、5、6行

为了在载入页面的时候避免链接使用它的默认属性而继续我们的操作，$(this)对象是指向“Select”按钮本身

<a class="checkbox-select"href="#">Select</a>

所以$(this).parent()在DOM中指向按钮的父元素，即<li>标签，也就是我们需要加上“selected”样式的元素。最后，第6行用来保证我们在设置复选框为已选取状态时真正被选取。

第10行

这个选择器选择所有的“Cancel”链接（当列表项目设置为“selected”时不可见）

第12、13、14行

用来除去我们在4、5、6行中所做的一切

DEMO

文本来源于Pretty checkboxes with jQuery，中文翻译源于ZH CEXO’s BLOG，基于CC协议发布，请转载时注明“署名-非商业性使用-相同方式共享”。