Web前端之复选框选中属性
熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好 了。博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了。今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻 译成中文,并加上了一些自己的见解。翻译的目的一是分享给大家,二是方便自己查阅。原文链接是:http://conceptf1.blogspot.com/2014/10/checkbox-checked-property.html。、
如果你从事web开发并且在你开发的网页中有复选框,你可能需要判断当前该复选框是否选中,进而执行一些条件语句。有很多种方法来判断一个复选框是否选中。
让我们先来看看原生的javascript是怎么判断这个属性的。在javascript中,在你选中了某个元素之后,你可以轻易地通过该元素的checked属性来判断你选中的复选框是否选中了。
我们来看一个例子,在你的页面上面有一个复选框并且该复选框有着唯一的id,比如myCheckBox ,如下面所示:
<input type="checkbox" id="myCheckBox"/>
现在我们首先通过javascript来选中这个元素然后获取它的checked属性。
function checkCheckBox() {
if (document.getElementById('myCheckBox').checked) {
//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
}
可以看到,我们先通过id选中了这个元素然后判断它的checked属性,如果复选框选中了,它的值是true,如果复选框没有选中,它的值将是false。点击查看该例子。
如果你使用的是jQuery并且你不想用原生的javascript来进行这个判断,方法有很多:
(1)使用 is(':checked')
这个用法中你将使用jQuery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满足你传递给该函数的条件参数,如果条件符合,返回true,否则返回false。
所以为了使用这个函数,我们需要选中元素然后检测选择器:checked 的值,这个选择器适用于复选框、单选按钮和select标签。 点击查看该例子
$('input[type="button"]').click(function () {
if ($('#myCheckBox').is(':checked')) {
//change it to alert('Its Checked'); if you not working with console
console.log('Its Checked');
} else {
console.log('No its not Checked');
}
});
(2)使用prop()
在jQuery1.6之前,函数attr()用来获取元素的property 和attributes,但是非常容易让人产生疑惑。所以jQuery1.6之后,一个新的函数prop()来获取元素的当前的property值。
但是在这之前,我们首先需要弄明白property 和attributes的区别。attributes是你给HTML标签设置的一些属性值,这包括你给一个标签设置的class、id甚至给输入框设定初始值一样。如果你没有在标签里面设置属性值但是却通过attr()来获取属性值, 会出现undefined的情况。prop()同样是用来获取元素的属性值,但是与attr()有着明显的区别的是,即便没有在html标签中定义想要获取的属性,也能够正确的返回需要的当前的属性值。
根据官方的建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()。
为了直观的体现两者之间的差别,你可以再页面加载完成之后立即改变输入框的值,这时候你就会发现即便是你的输入框的值变化了,用attr()获取的属性值并不会随着文本的改变而改变,而通过property()来获取的属性值会随着文本框内容的变化而变化。
看一个例子:
这里我们有一个设置了初始值的和一些attribute属性集的输入框:
<input type="text" id="myTextBox" value='set attribute value' />
然后在JQuery代码里我们这样写:
console.log('Attribute Value is : '+$('#myTextBox').attr('value'));
console.log('Property Value is : '+$('#myTextBox').prop('value'));
我们会发现,通过prop()来获取输入框里面的值永远都是和它里面的值同步的,而通过attr()老获取输入框里面的值一直都是在html标签里面设置的值。 点击查看该例子
(3)使用 filter :checked
var isChecked = $('#myCheckBox:checked').length > 0;
另外一种用于判断这个属性的值的方法是在选择元素的时候加上一个过滤器 :checked,然后根据所获得的元素的长度来判断元素的属性。但是这种用法并不推荐,因为当你的页面上有很多组复选框并且使用class选择器而不是id选择器的时候,所得到的答案可能是错误的。 点击查看该例子
我们能够看到,我们有好几种方法来获得复选款的选中属性。这也恰恰是web开发者经常需要用到并且在选择正确的使用方式时产生困惑的地方。
原文链接:http://www.cnblogs.com/yuanzm/p/4125032.html
Web前端之复选框选中属性的更多相关文章
- JS复选框选中
Web前端之复选框选中属性 熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...
- 【JS新手教程】LODOP打印复选框选中的任务或页数
之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...
- springMvc接收ajax数组参数,以及jquery复选框选中、反选、全选、全不选
一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- jquery复选框 选中事件 及其判断是否被选中
jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery 今天做了 显示和不显示密 ...
- Javascript 统计复选框选中个数
var checked = document.getElementsByName("checked_c[]"); var checked_counts = 0; for(var i ...
- Jquery获取当前页面中的复选框选中的内容
在使用$.post提交数据时,有一个数据是复选框获取数据,所以在当前页面获取到复选框选中的值并提交到后端卡住了一下,解决方法如下: 这两个input就是复选框的内容: str += "< ...
- CheckStateChanged(复选框选中状态更改事件)和 CheckedChanged(单选按钮选中状态更改事件)二者区别?
CheckStateChanged(复选框选中状态更改事件)和 CheckedChanged(单选按钮选中状态更改事件)二者区别: 复选框控件(CheckBox)提供了CheckedChanged控件 ...
- bootstrap table 复选框选中后,翻页不影响已选中的复选框
使用的 jquery版本为 2.1.1 在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections ...
随机推荐
- 关于在线编辑器的选择:tinymce - nilcms
一开始使用的是百度开发的编辑器:ueditor.使用方便,很容易就部署了.现在发现此编辑器也就做一些安全性的更新,而且对于这个编辑器也越来越不喜欢了. 1.臃肿.[1.4.3.3 PHP 版本].下载 ...
- IOS 杂笔-17(堆区栈区等)
栈区(stack):由系统自动分配,一般存放函数参数值.局部变量的值等.由编译器自动创建与释放.其操作方式类似于数据结构中的栈,即后进先出.先进后出的原则. 例如:在函数中申明一个局部变量int b; ...
- HTML5-03 页面布局
概述 HTML 文档中的元素是一个接着一个排列的,只是简单地在在块级元素的前后加上拆行,是一种流水布局.但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法 ...
- SQL Server 2008 标准版不支持Reporting Services的数据驱动订阅
今天开发同事找我,说为什么Reporting Services服务器的报表管理的订阅选项里面只有"新建订阅"选项, 没有"数据驱动订阅"选项,说实话,我也基本上 ...
- 聊下git pull --rebase
有一种场景是经常发生的. 大家都基于develop拉出分支进行并行开发,这里的分支可能是多到数十个.然后彼此在进行自己的逻辑编写,时间可能需要几天或者几周.在这期间你可能需要时不时的需要pull下远程 ...
- .NET程序员项目开发必知必会—Dev环境中的集成测试用例执行时上下文环境检查(实战)
Microsoft.NET 解决方案,项目开发必知必会. 从这篇文章开始我将分享一系列我认为在实际工作中很有必要的一些.NET项目开发的核心技术点,所以我称为必知必会.尽管这一系列是使用.NET/C# ...
- java中遍历map的两种方式
1.先将map对象转成set,然后再转为迭代器 Iterator iterator = map.entrySet().iterator(); while(iterator.hasNext()){ En ...
- springMVC 拦截器如何做登录检查及页面跳转
一个非常简单的登录权限拦截器 问题一:登录页面的提交请求肯定是要过滤掉的,目前采用在xml里配置<mvc:mapping path="/supplier/*"/>来过滤 ...
- 【转】Linux常用命令大全
原文地址:http://www.php100.com/html/webkaifa/Linux/2009/1106/3485.html 系统信息 arch 显示机器的处理器架构(1) uname -m ...
- redis 集群热备自动切换sentinel配置实战
---恢复内容开始--- Redis SentinelSentinel(哨兵)是用于监控redis集群中Master状态的工具,其已经被集成在redis2.4+的版本中一.Sentinel作用:1): ...