Css:制作一个更漂亮一些的多选列表框

你首先从CSS开始，建立一个新多选列表框在其中滚动的小区域。我们还可以建立悬浮效果，当鼠标移动到一个项目上时，背景色就会改变，以突出当前选择。

<style>

.checklist {

border: 1px solid #ccc;

list-style: none;

height: 10em;

overflow: auto;

width: 20em;

}.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {

display: block;

padding: 0 0.2em 0 25px;

text-indent: -25px;

}

.checklist label:hover { background: #777; color: #fff; }

* html .checklist label { height: 1%; }

</style>

至于JavaScript，你基本上只希望建立一个等同于常规多选列表框的URL。以上面的多选列表框为例，其查询字符串如下：

?favorites=Wendys&favorites=KFC

那就是我们希望仿效的地方。这段脚本只是利用外观(form)对象，循环所有检验栏(checkbox)的thru looking，并为那些选中的项目建立URL。很明显，这段脚本只应用于所有检验栏元素都位于新多选列表框的情况。

<script type="text/javascript">

function submitForm(f) {

var cb = f.getElementsByTagName("input");

var favorites = "favorites=";

var isFirst = true;for (var i = 0; i < cb.length; i++) {

var curr = cb[i];

if (curr.type == "checkbox") {

// window.alert(curr.name + ": " + curr.type);

if (curr.checked) {

if (isFirst) {

favorites = "favorites=" + curr.name;

isFirst = false;

} else {

favorites = favorites + "&favorites=" + curr.name;

}

}

}

}

window.location = f.action + "?" + favorites;

}

</script>

最后，经过简单改进的新多选列表框的代码如下：

<form method="get" action="">

<b>Check your favorite fast food:</b><br/>

<ul class="checklist">

<li><label><input type="checkbox" name="McDonalds" /><b>McDonalds</b><br/>I'm lovin' it</label></li>

<li><label><input type="checkbox" name="BurgerKing" /><b>Burger King</b><br/>Have it your way</label></li>

<li><label><input type="checkbox" name="Wendys" /><b>Wendy's</b><br/>Always fresh, never frozen</label></li>

<li><label><input type="checkbox" name="JackInTheBox" /><b>Jack in the Box</b><br/>If it doesn't get all over the place, it doesn't belong in your face</label></li>

<li><label><input type="checkbox" name="KFC" /><b>KFC</b><br/>Finger lickin' good</label></li>

<li><label><input type="checkbox" name="TacoBell" /><b>Taco Bell</b><br/>Think outisde the bun</label></li>

</ul>

<input type="button" value="Choose" onclick="submitForm(this.form);">

</form>

不幸的是，TechRepublic网站大量应用CSS，因此当我在博客中试用这段样本代码时，它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。

因此，我在自己的个人网站上用这段代码发布了一个简单的文件，你可以通过它了解代码的用法。

文/Rex Baldrazo

责任编辑：德东

查看本文国际来源