jQuery判断checkbox是否选中的3种方法


Posted in Javascript onAugust 12, 2014

jQuery能够极大提高html的编写效率,其中checkbox的选中判断有几种:

1, $(checkbox的id).prop("checked") 返回的是一个boolean值类型

2, $(this).is(":checked") 返回的也是一个boolean值类型

下面举一个点击checkbox修改文本框属性的例子:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>exp8_3</title>
</head>
 
<body>
 
<input type="text" name="first" id="first"><br>
<input type="text" name="second" id="second"><br>
<input type="checkbox" name="cb" id="hide" value="1"><span id="v0">隐藏第三个文本框</span><br>
<input type="checkbox" name="cb" id="ml" value="2"><span id="v1">变长第一个文本框</span><br>
<input type="text" name="third" id="third">
 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="application/javascript">
var t1 = $("#first");
var t2 = $("#second");
var t3 = $("#third");
$(document).ready(function(e) {
  t2.mousedown(function(e) {//t2被鼠标按下后
    var str = t1.val();//获得t1的文本信息
		t2.val(str);//加载入t2的文本
  });	
	$("#hide").click(function(e) {
		//var flag = $(this).is(":checked");
    var flag = $(this).prop("checked");
		t3.toggle();//动态显示隐藏文本框
		if(flag)
			$("#v0").html("显示第三个文本框");
		else
			$("#v0").html("隐藏第三个文本框");
  });
	$("#ml").click(function(e) {
		var flag2 = $(this).prop("checked");
		if(flag2){
			t1.css('width','300px');
			$("#v1").html("变短第一个文本框");
		}
		else{
			t1.css('width','169px');
			$("#v1").html("变长第一个文本框");	
		}
    
  });
});
</script>
</body>
</html>

js判断checkbox是否选中 .checked不管用

今天开发遇到一个小问题,记小本本记小本本

document.getElementById("id").checked
//正确
//如果返回值为true代表选中
//如果返回值为false代表未选中
document.getElementsByClassName("class").checked
//不能得到ture,false这样的返回值

问题出在哪了呢,我用调试工具看一下

jQuery判断checkbox是否选中的3种方法

显而易见,用id取返回的是数组,用class取返回的是对象数组(即便他只有一个值)
所以应该这么写
document.getElementsByClassName("a1")[0].checked

下面的方式是补充

网上大多数文章都提供的方法都是无效的,害死个人,本文中的方法小编亲测试有效,建议使用方法二:

方法一:

if ($("#checkbox-id")get(0).checked) {
    // do something
}

方法二:

if($('#checkbox-id').is(':checked')) {
    // do something
}

方法三:

if ($('#checkbox-id').attr('checked')) {
    // do something
}

这篇文章就介绍到这了,基本上没问题了吧,希望大家以后多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
Tab切换组件(选项卡功能)实例代码
Nov 21 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 #Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 #Javascript
JavaScript中跨域调用Flash的方法
Aug 11 #Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 #Javascript
javascript中解析四则运算表达式的算法和示例
Aug 11 #Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 #Javascript
jquery访问ashx文件示例代码
Aug 11 #Javascript
You might like
一个程序下载的管理程序(二)
2006/10/09 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery中[attribute^=value]选择器用法实例
2014/12/31 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
党员演讲稿
2014/09/04 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
社区重阳节活动总结
2015/03/24 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers