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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
JavaScript this调用规则说明
Mar 08 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Jan 02 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
js实现产品缩略图效果
Mar 10 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
Javascript实现简易天数计算器
May 18 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
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php的正则处理函数总结分析
2008/06/20 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vuex实现购物车的增加减少移除
2020/06/28 Javascript
three.js显示中文字体与tween应用详析
2021/01/04 Javascript
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
opencv实现图像平移效果
2021/03/24 Python
超市促销实习自我鉴定
2013/09/23 职场文书
护士实习鉴定范文
2013/12/22 职场文书
环保倡议书怎么写
2014/05/16 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
师德师风事迹材料
2014/12/20 职场文书
科级干部培训心得体会
2016/01/06 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
MySQL视图概念以及相关应用
2022/04/19 MySQL
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技