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显示当前时间示例
Mar 02 Javascript
禁用backspace网页回退功能的实现代码
Nov 15 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
JS 实现百度搜索功能
Feb 01 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 Javascript
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
VUE动态生成word的实现
Jul 26 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
基于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语法速查表
2006/12/06 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Python字典,函数,全局变量代码解析
2017/12/18 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
用python对oracle进行简单性能测试
2020/12/05 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
美国玩具公司:U.S.Toy
2018/05/19 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
毕业生就业协议书
2014/04/11 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
垃圾桶标语
2014/06/24 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
人民币使用说明书
2019/04/17 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS