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 相关文章推荐
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
ReactJS实现表单的单选多选和反选的示例
Oct 13 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 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
PHP中str_replace函数使用小结
2008/10/11 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
新闻内页-JS分页
2006/06/07 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python调用接口的4种方式代码实例
2019/11/19 Python
django model通过字典更新数据实例
2020/04/01 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
本科应届生自荐信
2014/06/29 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
春晚观后感
2015/06/11 职场文书
女人创业励志语录,句句蕴含能量,激发你的潜能
2019/08/20 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python