jQuery操作 input type=checkbox的实现代码


Posted in Javascript onJune 14, 2012
<input type="checkbox">: 
2012欧洲杯"死亡之组"小组出线的国家队是:<br> 
<input type="checkbox" name="nation" value="Germany">德国 
<input type="checkbox" name="nation" value="Denmark">丹麦 
<input type="checkbox" name="nation" value="Holland">荷兰 
<input type="checkbox" name="nation" value="Portugal">葡萄牙

1、小组第一名和第二名出线,所以要限制只能选两项。

var len = $("input[name='nation']:checked").length; 
if(len==0) { 
alert("请选择出线的国家队!"); 
return false; 
}else if(len<2) { 
alert("请选择两个国家队!"); 
return false; 
}else if(len>2) { 
alert("只能选择两个国家队!"); 
return false; 
}else { 
return true; 
}

2、遍历已选择的国家队。

$("input[name='nation']:checked").each(function(){ 
alert("已选择的国家队: "+$(this).val()); 
});

3、取消所有选中的国家队。

$("input[name='nation']:checked").attr("checked",false);

4、指定选中两个国家队。

$("input[name='nation'][value='Germany']").attr("checked",true); 
$("input[name='nation'][value='Holland']").attr("checked",true);

5、禁止选择国家队。

$("input[name='nation']").attr("disabled",true);

6、允许选择国家队。

$("input[name='nation']").attr("disabled",false);

7、选中索引为偶数或者奇数的国家队(索引是从0开始)。

//选中索引为偶数的国家队 
$("input[name='nation']:even").attr("checked",true); 
//选中索引为奇数的国家队 
$("input[name='nation']:odd").attr("checked",true);
Javascript 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
浅谈js的异步执行
Oct 18 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 #Javascript
jQuery操作select的实例代码
Jun 14 #Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 #Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 #Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 #Javascript
基于jQuery的360图片展示实现代码
Jun 14 #Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python函数超时自动退出的实操方法
2020/12/28 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
教育技术学专业职业规划书
2014/03/03 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
C站最全Python标准库总结,你想要的都在这里
2021/07/03 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js