博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jQuery设置元素选中的问题及解决办法
阅读量:7030 次
发布时间:2019-06-28

本文共 1751 字,大约阅读时间需要 5 分钟。

hot3.png

        现在界面操作的js脚本很多人都是使用的jquery了吧,这其中就有很多的什么控制checkbox的选中与不选中啊什么的(特别是这个在做“全选”的时候很有用),还有就是某些时候的多选模式下的select的option的选中。

        前段时间,公司开始了一个项目,里面就用到了jquery和jquery-ui,里面正好就有“全选”功能和多选模式的select,下面就来说说这里面遇到的坑。

        由于要兼容IE10的版本,所以只能用1.X的版本,然后又用了jquery-ui,所以最终定的版本就是1.11.4.

        这里面遇到的坑,其实都是由于一个原因引起的————使用了错误的方法!

        表现出来的现象是这样子的:

(用checkbox做“全选”举例哈)加载页面后,设置checkbox的“checked”属性为true

$(".list_checkbox").attr("checked", $(this).is(":checked"));

        设置之后呢,就是符合预期的,通过firebug查看界面的及时html代码,可以看到,其实是在checkbox中加了

checked="checked"

        然后取消“全选”,就把这个去掉了,也就取消了选中状态,这很好理解,到目前为止都还是符合预期的。

        但是接下来就不知道是怎么回事了,再次点击“全选”,在html代码的checkbox中也确实添加了

checked="checked"

        但是却没有表现出来“选中”的效果,单独去点击选中也是可以选中的。

        相似的现象还会出现在开启了“多选”模式的select的option的选中的时候。

        解决办法,在网上查阅了一下,原来是用错了方法!!

        不应该使用attr()方法,而应该使用prop()方法,这个修改是在1.6开始的。详细的介绍可以参考一下:

        这里来贴一下“全选”的代码:

    // “全选”checkbox    $(".list_checkall").click(function() {        $(".list_checkbox").prop("checked", $(this).is(":checked"));    });    // 子复选框勾选情况对全选勾选框的影响    $(".list_checkbox").click(function() {        // 有一个没有选中则取消全选        if (!this.checked) {            $(".list_checkall").prop("checked", false);            return;        }        // 选中的数目和总数目相等,加上全选        var chsub = $(".list_checkbox").length;        var checkedsub = $(".list_checkbox:checked").length;        if (checkedsub == chsub) {            $(".list_checkall").prop("checked", true);        }    });

        “全选”的checkbox设置class为“list_checkall”,其他的需要被选择的checkbox设置class为“list_checkbox”。这个处理还会对checkbox已经被选中的数目进行判断处理,在全部都分别选中之后自动选中“全选”的checkbox;同理,在“全选”之后,取消某一个的选中状态,也会取消“全选”的选中。

        对于select,开启“多选”模式

里面的option使用其他的js添加,提交时,为了确保这个select里面的option都会被提交,需要将所有的option设置为“选中”,使用的语句为

$(".select_chosen option").prop("selected",true);

        有点乱,想到哪里写到哪里了,大家将就看吧,不好意思哈!

        enjoy!

转载于:https://my.oschina.net/songxinqiang/blog/423664

你可能感兴趣的文章
使用cocoaPods import导入时没有提示的解决办法
查看>>
iOS数据持久化存储之归档NSKeyedArchiver
查看>>
JavaScript面向对象
查看>>
Intellij修改模板代码
查看>>
2.页面布局示例笔记
查看>>
一些老游戏CPU 100%占用的解决方法
查看>>
f5基本介绍
查看>>
博前语
查看>>
Java SE核心之一:常用类,包装类,其他基本数据类型包装类。
查看>>
郑捷《机器学习算法原理与编程实践》学习笔记(第二章 中文文本分类(一))...
查看>>
python (ploit)
查看>>
Android 用achartengine 画折线图怎么显示不正确
查看>>
程序简单的测试与升级(暨实践第一次作业)
查看>>
信号处理
查看>>
【100题】第五十九题 用C++编写不能被继承的类
查看>>
轻描淡写
查看>>
mysql基本操作
查看>>
39.CSS3弹性伸缩布局【下】
查看>>
[javascript]图解+注释版 Ext.extend()
查看>>
我的前端工具集(七)div背景网格
查看>>