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函数
Jul 21 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 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
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php检测useragent版本示例
2014/03/24 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js 一个关于图片onload加载的事
2013/11/10 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
python简单商城购物车实例代码
2018/03/15 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python对文件的操作方法汇总
2020/02/28 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python使用进程Process模块管理资源
2020/03/05 Python
python3中数组逆序输出方法
2020/12/01 Python
学习雷锋寄语大全
2014/04/11 职场文书
有关环保的标语
2014/06/13 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
教师年度个人总结
2015/02/11 职场文书
合同审查法律意见书
2015/06/04 职场文书
黄埔军校观后感
2015/06/10 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL