javascript实现复选框选中属性


Posted in Javascript onMarch 25, 2015

熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了。博主之前用户不少方法,经常Google到一些这个不好那个不好的文章,到后面自己都混乱了。今天偶然看到一篇外国的博客,觉得讲解的很不错,打算翻译成中文,并加上了一些自己的见解。

如果你从事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来进行这个判断,方法有很多:

使用 is(':checked')

这个用法中你将使用jQuery的 is()函数。这个函数的功能是判断选中的元素或者元素集合是否满足你传递给该函数的条件参数,如果条件符合,返回true,否则返回false。

所以为了使用这个函数,我们需要选中元素然后检测选择器:checked 的值,这个选择器适用于复选框、单选按钮和select标签。

[/code]
    $('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');
        }
    });
[/code]

使用 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标签里面设置的值。

$('input[type="button"]').click(function () {

    alert('Attribute Value is : '+$('#myTextBox').attr('value'));

    alert('Property Value is : '+$('#myTextBox').prop('value'));

});

使用 filter :checked

    var isChecked = $('#myCheckBox:checked').length > 0;
另外一种用于判断这个属性的值的方法是在选择元素的时候加上一个过滤器 :checked,然后根据所获得的元素的长度来判断元素的属性。但是这种用法并不推荐,因为当你的页面上有很多组复选框并且使用class选择器而不是id选择器的时候,所得到的答案可能是错误的。

$('input[type="button"]').click(function () {

    if ($('#myCheckBox:checked').length > 0 ) {

        //change it to alert('Its Checked'); if you not working with console

        console.log('Its Checked');

    } else {

        console.log('No its not Checked');

    }

});

我们能够看到,我们有好几种方法来获得复选款的选中属性。这也恰恰是web开发者经常需要用到并且在选择正确的使用方式时产生困惑的地方。

以上所述就是本文的全部内容了,希望对大家学习javascript能够有所帮助。

请您花一点时间将文章分享给您的朋友或者留下评论。我们将会由衷感谢您的支持!

Javascript 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
日期 时间js控件
May 07 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
JavaScript 变量命名规则
Sep 23 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery的load()方法及其回调函数用法实例
Mar 25 #Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 #Javascript
jQuery使用post方法提交数据实例
Mar 25 #Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 #Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 #Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 #Javascript
使用JavaScript 实现的人脸检测
Mar 24 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
jQuery 解析xml文件
2009/08/09 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
vue使用jsonp抓取qq音乐数据的方法
2018/06/21 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python读取oracle函数返回值
2016/07/18 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
员工辞职信范文
2015/03/02 职场文书
演讲比赛主持词
2015/06/29 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
使用python绘制分组对比柱状图
2022/04/21 Python