jQeury实现限定上限的多选表单

jQeury在网页开发中非常有用，我们以前也说过几次，今天遇到一位读者的问题：

“老师好，请教一个js的问题！最近在做一个20选10的投票系统，客户要求每次投票的选项不能超过10个，超过10个就不能投票。（即小于或等于10），请问如何用js来检测每次投票的选项不能超过10个啊？谢谢！”

这里我就用jQeury来解决一下这位读者的问题，为了代码简单，我做一个共有5个备选选项，最多允许选择2项的例子。

首先写出HTML

<div id="optionDiv"> <input id="Checkbox1" type="checkbox" /> <label for="Checkbox1">选项A</label><br /> <input id="Checkbox2" type="checkbox" /> <label for="Checkbox2">选项B</label><br /> <input id="Checkbox3" type="checkbox" /> <label for="Checkbox3">选项C</label><br /> <input id="Checkbox4" type="checkbox" /> <label for="Checkbox4">选项D</label><br /> <input id="Checkbox5" type="checkbox" /> <label for="Checkbox5">选项E</label><br /> </div>

HTML很简单，不再解释，接下来看一下jQuery的代码：

 

<mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js" ></mce:script> <script type="text/javascript"> $(pageLoaded); function pageLoaded() { $("#optionDiv input:checkbox").click(checkboxClicked); } function checkboxClicked() { if ($("#optionDiv input:checkbox:checked").length > 2) $(this).attr("checked", false); }

 

第1行的作用是引入jQeury库文件，第2~13行的作用就是实现5个选项中限制最多选两项的代码。

第3行中，“$”是一个jquey定义的函数，它的作用是定义在整个页面装载到浏览器以后，执行括号中指定的函数，也就是下面定义的pageLoaded函数。

第5~7行就定义了这个pageLoaded函数，函数执行的代码就是第8行中的内容，即首先选中id为optionDIV中所有checkbox 元素，并为每一个选中的checkbox元素设定被鼠标单击时的行为，即执行括号中的函数，也就是checkboxClicked函数。

第9~12行就定义了checkboxClicked函数，其功能也很简单，但某个checkbox被单击以后，判断一下一共有多少个 checkbox被选中了，如果这个数量大于2，那么就把当前点击的这个checkbox的checked属性，设置为false，这样这次点击就被取消了。

 

从上面代码中可以看到，Javascript不同传统的静态高级语言的一个地方是，它可以非常方便地把函数作为参数传递，这一点很灵活，上面的代码也可以写成下面的样子，效果完全相同。

 

$(function() { $("#optionDiv input:checkbox").click(function() { if ($("#optionDiv input:checkbox:checked").length > 2) $(this).attr("checked", false); }); });