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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
tsconfig.json配置详解
May 17 Javascript
vue路由的配置和页面切换详解
Sep 09 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中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
2019/05/13 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
python生成带有表格的图片实例
2019/02/03 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Python类成员继承重写的实现
2020/09/16 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
为数据库创建索引都需要注意些什么
2012/07/17 面试题
几个Linux面试题笔试题
2012/12/01 面试题
Solaris操作系统的线程机制
2015/07/28 面试题
历史系毕业生自荐信
2013/10/28 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
毕业实习评语
2014/02/10 职场文书
采购部经理岗位职责
2014/02/10 职场文书
房展策划方案
2014/06/07 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
复兴之路观后感
2015/06/02 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android