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语言核心数据类型和变量使用介绍
Aug 23 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
通过实践编写优雅的JavaScript代码
May 30 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
js数组的基本使用总结
2021/01/18 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Numpy掩码式数组详解
2018/04/17 Python
python实现祝福弹窗效果
2019/04/07 Python
python数据预处理方式 :数据降维
2020/02/24 Python
新锐科技Java程序员面试题
2016/07/25 面试题
写好自荐信的技巧
2013/11/08 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
大学社团活动总结
2014/04/26 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
教师党员整改措施
2014/10/24 职场文书
布达拉宫的导游词
2015/02/02 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript