`

Jquery 1.9 Checkbox 选中问题

 
阅读更多

Jquery 1.9版本对CheckBox操作有更新,在我们实际应用中多用  $('#checkbox').attr('checked',true)执行选中操作,但是测试时会发现在部分浏览器(ie10\firefox\chrome)中,只有第一次是能够生效的,之后就没有反应啦,查了一下才知道新版本有替代方法:prop,例如下面全选的例子

<input type="checkbox" class="check-all">全选<br/>
<input class="check-one check" type="checkbox" value="1"/>1
<input class="check-one check" type="checkbox" value="2"/>2
<input class="check-one check" type="checkbox" value="3"/>3
<input class="check-one check" type="checkbox" value="4"/>4
<input class="check-one check" type="checkbox" value="5"/>5
        <script type="text/javascript">
            $(function () {
                $("input.check-all").click(function () {
                    $("input.check-one").prop("checked", $(this).is(":checked"));
                });

                $("input.check-one").click(function () {
                    var allChecked = true;
                    if ($(this).is(":checked")==false && $("input.check-all").is(":checked"))
                        allChecked = false;
                    else 
                    {
                        $("input.check-one").each(function (n, v) {
                            if (!$(v).is(":checked"))
                            {
                                allChecked = false;
                                return false;//break
                            }
                        });
                    }
                    $("input.check-all").prop("checked", allChecked);
                });
            });           
</script>

 那么attr和prop具体有什么区别呢:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

也就是说W3C标准里包含的属性都建议用prop,其他的才用attr

0
0
分享到:
评论

相关推荐

    jquery checkbox 选中 取消 checkbox多选

    本文将深入探讨如何使用jQuery来实现复选框(checkbox)的选中和取消选中功能,以及如何处理多选的情况。 首先,我们需要理解HTML中的`&lt;input&gt;`元素类型为"checkbox"的基本用法。复选框用于让用户从多个选项中选择...

    jquery获取checkbox选中的值

    在本文中,我们将深入探讨如何使用jQuery来获取checkbox选中的值,包括全选、取消全选、反选以及选中奇数行的操作,并讲解如何获取选中的值。 首先,我们需要引入jQuery库。在`1.html`文件中,我们看到包含了一个名...

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

    jquery1.9文件以及api

    本篇文章将深入探讨 jQuery 1.9 的核心特性,API 变更以及兼容性问题。 首先,jQuery 1.9 强调了向后兼容性,但值得注意的是,对于 Internet Explorer 浏览器,从 IE6 到 IE8 的老版本并不支持 1.9 及以上版本。这...

    jQuery获取checkbox选中的值

    本知识点将深入探讨如何使用jQuery获取选中的checkbox值,以及如何控制checkbox的选中状态。 ### jQuery获取选中的checkbox值 1. **理解checkbox的使用场景**: 当用户需要在多个选项中选择一个或多个时,复选框...

    jquery 对checkbox的操作

    jQuery提供`is()`方法来检查checkbox是否被选中: ```javascript if ($("#checkboxID").is(":checked")) { // checkbox is checked } else { // checkbox is not checked } ``` 四、事件处理 1. 绑定click事件,...

    jquery 的checkbox样式

    接着,可以通过jQuery选择器来选中需要改变样式的复选框,并调用插件提供的方法来应用样式。例如,如果所有的复选框都有一个统一的class名`custom-checkbox`,可以这样写: ```javascript $(document).ready...

    绚丽的复选框 jquery-checkbox

    **绚丽的复选框 jQuery-Checkbox** 在网页设计中,复选框(checkbox)是常见的交互元素,用于让用户选择一个或多个选项。然而,原始的HTML复选框样式通常较为简单,缺乏吸引力。为了提升用户体验和界面美观度,...

    jQuery的高性能TreeView源码(带CheckBox)

    jQuery的高性能TreeView源码(带CheckBox) 1:支持静态的树,即一次性将全部数据加载到客户端。 2:异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据。 3:Checkbox树(可能是静态树也可能是异步树...

    Js/Jquery 实现checkbox全选,反选,全不选

    总结起来,使用JavaScript和jQuery实现checkbox的全选、反选和全不选功能,主要涉及到对DOM元素的操作,特别是复选框的选中状态控制。通过事件监听和属性修改,我们可以轻松地实现这些交互效果,提升用户体验。在...

    jQuery 对checkbox的操作

    jQuery 对checkbox的操作

    js实现翻页后保持checkbox选中状态的实现方法

    所以checkbox为false。...把选中的checkbox中的id,其中包括模块id,操作id,拼接成一个字符串,然后把字符串传递到action中。 每次调用此页面时,首选调用action中的选中的id字符串,然后根据在id字符串的基

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    checkBox分别处理选中与不选中

    ### checkBox分别处理选中与不选中 在Web开发中,`checkbox`是一种常见的表单元素,用于收集用户的选择信息。通常情况下,一个`checkbox`只能代表一项选择,但可以通过设置多个`checkbox`来实现多选功能。本文将...

    jquery checkbox点击选中列表样式代码

    在本文中,我们将深入探讨如何使用jQuery来实现checkbox点击选中列表样式的代码。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理以及动画效果等任务。在Web开发中,尤其是在处理用户交互时,jQuery提供...

    C#中获取CheckBox选中值(多选)

    在C#编程语言中,处理用户界面元素如CheckBox的选中状态是一项常见需求,尤其是在涉及多选场景时。本文将深入探讨如何在C#中有效且简洁地获取多个CheckBox控件的选中值,这对于构建响应式和用户友好的应用程序至关...

    jquery 实现鼠标单击行时,选中checkbox复选框

    jquery 实现鼠标单击行时,改变行的背景颜色,选中checkbox复选框

Global site tag (gtag.js) - Google Analytics