你问我答(33)——jQeury实现限定上限的多选表单
jQeury在网页开发中非常有用，我们以前也说过几次，今天遇到一位读者的问题：
“老师好，请教一个js的问题！最近在做一个20选10的投票系统，客户要求每次投票的选项不能超过10个，超过10个就不能投票。（即小于或等于10），请问如何用js来检测每次投票的选项不能超过10个啊？谢谢！”
这里我就用jQeury来解决一下这位读者的问题，为了代码简单，我做一个共有5个备选选项，最多允许选择2项的例子。
首先写出HTML
1 2 3 4 5 6 7 | <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的代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript" src="jquery.js" ></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); } </script> |
点击这里看一下效果演示。下面简单解释一下原理，上面代码中：
第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，这样这次点击就被取消了。
说明：
如果读者对上面代码还有不清楚的地方，请看看我们的视频教程：http://learning.artech.cn/category/javscript-jquery ，里面对Javascript和jQuery作了比较详细的讲解。
从上面代码中可以看到，Javascript不同传统的静态高级语言的一个地方是，它可以非常方便地把函数作为参数传递，这一点很灵活，上面的代码也可以写成下面的样子，效果完全相同。
1 2 3 4 5 6 | $(function() { $("#optionDiv input:checkbox").click(function() { if ($("#optionDiv input:checkbox:checked").length > 2) $(this).attr("checked", false); }); }); |
OK，哈哈，解决了。 在做项目的时候，还为这事发愁呢。-，- 这下找到这个解决方法了。
谢谢了。！
补充一下 ^_^ 接受表单数据的服务端同样需要做判断处理，如果用户将该页面保存下来做一些修改再提交或者干脆禁用 JavaScript 也可以绕过投票限制。
anyLiv ，
您说的完全正确，验证一定要保证前后端都做，这是做Web开发最基本的一条原则了。不过我们这个流言奔涌的是别人现成的插件，所以也不太好改，我对PHP不是很熟悉。等有时间和我仔细看一下他的源代码，修改一下对HTML标记的过滤机制~~~
感谢老师的解答，看来用jqeury实现确实很简单，不过我觉得为了程序更加人性化，应该做成：当选择2项后，其余的复选框就变成灰色不可用的状态：）
梧桐 ，
这个要求实现起来也很简单，相信你自己应该可以实现了吧？
再问一下：为什么不选择下面的写法（虽然效果一样）？难道是更有可读性，更好理解？
青色 ，
两种写法都可以的，我是为了给初学者讲的清楚一些，所以都列出来。
一开始看到问题的时候觉得有点难度，但后面一看代码。。。。。很简单。。。。
青色 ，
这就是 jQeury 的伟大之处~~~
还没有看Jquery，现在正在恶补Javascript的知识，没有语言基础，学起来太费劲了。
Aishinjeilo，
您说得对，掌握好基础十分重要！ JS是一个非常灵活的语言，虽然看起来很简单，但是如果是第一门学习的编程语言，并不很容易。
我觉得你可以配合一门强类型的静态语言，对于理解编程的很多原理更有好处。比如C#这样的高级语言，确实很适合作为第一门高级语言，真正理解编程的内部机制，是很有好处的。
唉..老师看了你介绍的C#书籍 对我在理解JS上面的问题 帮助太大了，但是主要还是C#在对于内存机制方面的东西我不了解，请问你们的C#书籍写到什么程度了，我是说完成的进度。
mqi ，
我们的书不会讲C#本身了~~~ 你学会得越多，就会感到自己不会得越多，这是好事儿！加油！
你们不出C#的书了？你说的c#本身的什么意思
mqi，
我们会出ASP.net的书，会用到C#，但是不会讲解C#的具体用法了，比如什么叫函数、什么叫委托、什么叫事件、什么叫泛型、IQueryable怎么用等等这些属于属于C#本身的就没有篇幅讲解了。