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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
Jan 31 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
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
SONY SRF-M100的电路分析
2021/03/02 无线电
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php的ajax简单实例
2014/02/27 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
js日期联动示例
2014/05/02 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
介绍一款python类型检查工具pyright(推荐)
2019/07/03 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
药学专业学生的自我评价分享
2014/02/06 职场文书
合伙协议书
2014/04/23 职场文书
责任书格式
2015/01/29 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python