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 相关文章推荐
js验证表单大全
Nov 25 Javascript
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
详解Layer弹出层样式
Aug 21 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 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 google或baidu分页代码
2009/11/26 PHP
destoon二次开发入门示例
2014/06/20 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
js获取微信版本号的方法
2015/05/12 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
python向图片里添加文字
2019/11/26 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
澳洲Chemist Direct药房中文网:澳洲大型线上直邮药房
2019/11/04 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
电子商务专员岗位职责
2013/12/11 职场文书
文明餐桌活动方案
2014/02/11 职场文书
小班幼儿评语大全
2014/04/30 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
Nginx + consul + upsync 完成动态负载均衡的方法详解
2021/03/31 Servers
浅谈Python中的正则表达式
2021/06/28 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python