Jquery—JQuery对checkbox的操作(01)
JQuery对checkbox的操作是多方面的，不能穷尽的，在这里先总结一下工作过程中用到的一些操作，以后再遇到其它的关于JQuery对checkbox的操作再做总结：
1、禁用checkbox标签：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JQuery对checkbox的操作(01)——禁用checkbox标签</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
</head>
<body>
<input type="checkbox" name="ball" value="1"/>篮球 <input type="checkbox" name="ball" value="2" checked="checked"/>足球 <input type="checkbox" name="ball" value="3"/>橄榄球
<script type="text/javascript">
$("input:checkbox[name='ball']").attr("disabled","disabled");
</script>
</body>
</html>
2、选中特定checkbox选项：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JQuery对checkbox的操作(01)——选中特定checkbox选项</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
</head>
<body>
<input type="checkbox" name="ball" value="1"/>篮球 <input type="checkbox" name="ball" value="2"/>足球 <input type="checkbox" name="ball" value="3"/>橄榄球
<script type="text/javascript">
$('input:checkbox[name="ball"][value="2"]')[0].checked = true;//选中“足球”项
</script>
</body>
</html>
3、获取选中checkbox的value值(以逗号间隔)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JQuery对checkbox的操作(01)——获取选中checkbox的value值(以逗号间隔)</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
</head>
<body>
<input type="checkbox" name="ball" value="1"/>篮球 <input type="checkbox" name="ball" value="2"/>足球 <input type="checkbox" name="ball" value="3"/>橄榄球
<input type="button" value="取值" οnclick="javascript:getValue();">
<script type="text/javascript">
function getValue(){
var ballIds="";
$("input:checkbox[name='ball']:checked").each(function(){
ballIds += $(this).val()+",";
});
ballIds=ballIds.substring(0, ballIds.lastIndexOf(','));
alert("选中项的值为：" + ballIds);
}
</script>
</body>
</html>
4、判断是否选择了checkbox选项：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JQuery对checkbox的操作(01)——判断是否选择了checkbox选项</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
<script type="text/javascript" src="./jquery-1.6.2.js"></script>
</head>
<body>
<input type="checkbox" name="ball" value="1"/>篮球 <input type="checkbox" name="ball" value="2"/>足球 <input name="ball" type="checkbox" value="3"/>橄榄球
<input type="button" value="判断" οnclick="javascript:checkBall();">
<script type="text/javascript">
function checkBall(){
var ballIds = $('input:checkbox[name="ball"]:checked');
if(ballIds.length == 0) {
alert("您没有选择任何数据！");
}else{
alert("您共选择了" + ballIds.length + "条数据！");
}
}
</script>
</body>
</html>
【0分下载Demo】
Jquery—JQuery对checkbox的操作(01)相关推荐
- jQuery的radio,checkbox,select操作
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...
- JQUERY对RADIO,CHECKBOX,SELECT的操作常用方法大全
JQUERY对RADIO,CHECKBOX,SELECT的操作 ******************************************************************** ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- JQuery属性、事件相关操作
JQuery属性相关操作 文章目录 JQuery属性相关操作 一.尺寸相关.滚动事件 1.获取和设置元素的尺寸 2.获取元素相对页面的绝对位置 3.获取浏览器可视区宽度高度 4.获取页面文档的宽度高度 ...
- [转]使用jQuery获取radio/checkbox组的值的代码收集
今天来看下JQ对天Checkbox复选框的操作.看下面的一个小例子.在这个例子中包括了以下几个功能 代码如下: <!-- $("document").ready(functi ...
- jquery如何获取checkbox，并判断是否选中
2019独角兽企业重金招聘Python工程师标准>>> jquery如何获取checkbox,并判断是否选中 <div id="divId" class=& ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- JQuery 1.6+ checkbox 状态选择
示例: HTML: <form><table><tr><td><input type="checkbox" id=" ...
- jquery如何获取checkbox的值
jquery如何获取checkbox的值 一.总结 一句话总结:就是通过jquery获取哪些对应name的checkbox,然后找出:check(被选中的),然后通过jquery的each遍历获取这些 ...
- day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
最新文章
- JAVA socket编程 Datagram套接字 UDP协议（转）
- vue调用百度地图API
- 一个判断session是否过期的小技巧
- 培训变成了闹剧，却不想怎么改进
- CSS：个人常用按钮样式
- 远程连接virtualBox本地虚拟机并访问虚拟机服务
- Mangos某人经验
- CSS设置字间距、行间距、首行缩进
- PLC滤波算法之卡尔曼滤波(kalman Filter)代码+测试
- 英语语法总结_02 名词词组与代名词
- Rust游戏引擎Bevy初探
- 3D立体书架切换效果(一)
- 搜索衬线字体和无衬线字体的区别
- 金蝶KIS财务接口使用说明
- 诺基亚 android,诺基亚当年为什么走向没落也没用安卓系统？
- java商户平台微信支付宝支付_微信支付/支付宝支付/银联支付，对比加总结(Java服务端)...
- 简单移动平均线（Simple Moving Average，SMA) 定义及使用
- thinkphp mysql分表_数据库分表和分库的原理及基于thinkPHP的实现方法
- 2020年8计算机软件基础自考,浙江省2020年8月高等教育自学考试计算机软件基础（二）试题.docx...
- PR连接耳机后耳机没声音以及自动保存