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 相关文章推荐
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
Vue简单实现原理详解
May 07 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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
Yii 框架入口脚本示例分析
2020/05/19 PHP
Js组件的一些写法
2010/09/10 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
html文本框提示效果的示例代码
2014/06/28 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python简单调用MySQL存储过程并获得返回值的方法
2015/07/20 Python
python文本数据处理学习笔记详解
2019/06/17 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
大学生自我鉴定
2013/12/08 职场文书
商场中秋节活动方案
2014/02/07 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
消防安全标语
2014/06/07 职场文书
低碳环保演讲稿
2014/08/28 职场文书
单位一把手群众路线四风问题整改措施
2014/09/25 职场文书
给医院的感谢信
2015/01/21 职场文书