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

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

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

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

首先写出HTML

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

 

 

第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不同传统的静态高级语言的一个地方是,它可以非常方便地把函数作为参数传递,这一点很灵活,上面的代码也可以写成下面的样子,效果完全相同。

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值