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在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JS 实现点击a标签的时候让其背景更换
Oct 15 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
springboot+VUE实现登录注册
May 27 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
IStream与TStream之间的相互转换
2008/08/01 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP安全配置详细说明
2011/09/26 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
深入理解JavaScript中的for循环
2017/02/07 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
[00:16]热血竞技场
2019/03/06 DOTA
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
学生评语大全
2014/04/18 职场文书
大学生求职计划书
2014/04/30 职场文书
留学经费担保书
2014/05/12 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
客户付款通知书
2015/04/23 职场文书
工程项目合作意向书
2015/05/08 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL