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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
vue2.0实现列表数据增加和删除
Jun 17 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
js 回车提交表单两种实现方法
2012/12/31 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
JS时间戳与日期格式互相转换的简单方法示例
2021/01/30 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
python获取豆瓣电影简介代码分享
2014/01/16 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
pygame游戏之旅 按钮上添加文字的方法
2018/11/21 Python
对Django外键关系的描述
2019/07/26 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python包和模块的分发详细介绍
2020/06/19 Python
如何让python的运行速度得到提升
2020/07/08 Python
python实现人工蜂群算法
2020/09/18 Python
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
新大陆软件面试题
2016/11/24 面试题
思想汇报范文
2013/11/04 职场文书
2015医院个人工作总结范文
2015/05/21 职场文书
初中生物教学反思
2016/02/20 职场文书
Android studio 简单计算器的编写
2022/05/20 Java/Android