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,因此当我在博客中试用这段样本代码时,它显得非常难看。我可不希望为避免冲突而把代码修改得一团糟——这里我只是努力想说明其中的基本理论。
因此,我在自己的个人网站上用这段代码发布了一个简单的文件,你可以通过它了解代码的用法