`

用jQuery模拟鼠标点击checkbox

 
阅读更多

假如在表格中,有一列checkbox,要实现钩选表头的checkbox,自动选中表中所有的checkbox。实现方法:

给表中所有的checkbox绑定change事件,当选中表头的checkbox,执行$(selector).trigger("click");,此时checkbox会被钩选,并且会触发change事件,并且这时checkbox.checked的值已经是true了。

 

如果给表格中的所有checkbox绑定click时间,然后执行$(selector).trigger("click");,虽然能够触发cilck事件,并且checkbox被钩选,但是此时的checkbox.checked却是false,在click事件执行完毕之后,checked才会变成true。

 

不要想绑定change事件,然后触发change事件。这样做既不会钩选,也不会影响checked的值!

 

注意:

这个例子只说明了正确触发所有钩选/非钩选操作的思路。如果完全按照这个例子做,会有bug:

如果原来就钩选了2个,有8个未钩选,然后钩选“全选”,会发现这2个钩选的变成未钩选的,8个变成钩选的了。

 

参考文章:http://stackoverflow.com/questions/7668826/jquery-triggerclick-not-firing-click-event-on-checkbox

分享到:
评论

相关推荐

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

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

    基于jQuery的CheckBox复选框代码,效果很酷哦

    3. **编写jQuery代码**:在JavaScript中,使用jQuery选择器找到所有的复选框,然后为它们添加点击事件监听器。当复选框被点击时,修改其相邻的隐藏元素(例如,一个`<span>`标签)的样式,模拟复选框被选中的效果。...

    jquery美化checkbox,radio

    、根据原有的select 模拟生成新的 select。 2、支持键盘,可通过键盘选择选项。 3、可自定义样式。 4、方便灵活,可选择需要的seletc 进行模拟(非全局模拟) 5、判断用户是否开启脚本支持,若未开启,不进行...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...

    MAC风格的checkbox,button,radiobox

    在交互上,鼠标悬停时会有微妙的高光变化,点击时会有一下明显的视觉反馈,以告知用户操作已成功执行。 2. **MAC风格的按钮(Button)**: MAC风格的按钮设计注重清晰易读的文本和微妙的质感。它们通常有轻微的3D...

    25种JQuery插件

    这个可能是一个模拟Mac风格Dock栏的jQuery插件,用于创建响应式的导航栏,提供类似Mac系统的滑动效果和缩放动画,增加网站的视觉吸引力。 7. **checkboxStyle.rar** 这个插件可能用于美化网页中的复选框...

    select里实现checkbox选择和input里边实现上下一条

    本文将深入探讨如何在`select`中实现复选框(checkbox)选择功能,以及如何在`input`中实现上下滚动浏览条。 首先,让我们关注`select`元素。通常,`select`用于创建一个下拉菜单,用户只能从中选择一个选项。然而...

    jQuery自定义check、radio样式

    对于不支持这些特性的老版本IE浏览器,可能需要使用图片(如`checkbox.png`和`radio.png`)来模拟自定义样式。 `index.html`文件是项目的主页面,它包含了HTML结构,用于展示和测试自定义的jQuery样式。在HTML中,...

    javascript实现checkbox复选框实例代码

    当选中复选框时,使用JavaScript的jQuery库来添加`.LabelSelected`类,更改背景图片,模拟选中状态。这部分代码如下: ```html .CheckBoxClass { display: none; } .CheckBoxLabelClass { background: url(...

    div+css模拟select

    2. **应用CSS样式**:为`div`和`ul`设置适当的宽高、边距、背景色等,用`:hover`、`:focus`伪类实现鼠标悬停和获取焦点时的样式变化。 3. **模拟下拉效果**:通过JavaScript或jQuery监听用户事件,例如点击主`div`时...

    类似windows鼠标按住不放全选

    在JavaScript中,我们可以监听鼠标的`mousedown`和`mouseup`事件来模拟这种全选行为。当鼠标按下时,我们开始选择,而当鼠标释放时,我们结束选择。以下是一个简单的示例: ```javascript document....

    似windows鼠标按住不放全选

    3. 使用jQuery监听鼠标按下和移动事件,根据用户操作更新选中状态。 4. 考虑视觉样式,如自定义复选框图标。 通过这种方式,我们可以在网页上模拟出类似Windows操作系统的全选功能,提升用户体验。

    纯CSS3实现线条按钮动画特效.zip

    在前端开发领域,CSS3(层叠...在这种情况下,我们可以利用CSS的`:checked`伪类和隐藏的`<input type="checkbox">`元素来模拟按钮的点击状态,并根据此状态触发动画。 ```html <input type="checkbox" id="toggle"> ...

    仿ios滑动开关插件

    在非iOS平台上,开发者可能会使用第三方插件来模拟这种用户体验,以提供一致的视觉和交互效果。 滑动开关插件的工作原理通常是基于HTML、CSS和JavaScript构建的,它可以无缝地融入网页或Web应用中。在这个案例中,...

    纯css3黑色炫酷开关按钮动画效果

    在提供的文件中,`index.html`很可能是展示这个开关按钮动画效果的网页源代码,`readme.html`可能包含了关于如何使用和自定义这个组件的说明,而`jQuery之家.url`可能是一个链接,指向包含更多关于jQuery或者其他...

    具有多选功能的下拉列表框

    3. **JavaScript交互**:为了实现checkboxlist的效果,通常会用到JavaScript或jQuery来处理用户的交互事件,如点击、键盘操作等,同时更新选定的选项状态。 4. **自定义控件**:在某些情况下,为了获得更好的用户...

    纯CSS3效果逼真的开关按钮特效.zip

    1. **伪类选择器**:CSS3中的伪类选择器允许我们在元素的不同状态之间添加样式,比如`:hover`表示鼠标悬停,`:active`表示元素被激活(点击时),`:checked`则用于复选框和单选按钮,当它们被选中时。在开关按钮中,...

    导航栏:导航栏可折叠香草CSS

    但是,如果你仍然想坚持使用纯CSS,可以考虑使用CSS的`checkbox`和`label`元素来模拟一个简单的点击展开/折叠效果。首先,隐藏`checkbox`,然后将`label`与`checkbox`关联,通过改变`checkbox`的`checked`状态来切换...

    ASP.NET Multiple Selection DropDownList with AJAX HoverMenuExtender

    6. **客户端脚本**:为了提高用户体验,可以在客户端使用JavaScript或jQuery来处理HoverMenu的显示和隐藏,以及多选状态的更新。这可以使交互更加流畅,减少不必要的服务器往返。 综上所述,ASP.NET Multiple ...

    js实现iPhone界面风格的单选框和复选框按钮实例

    在本实例中,我们将探讨如何使用JavaScript,特别是jQuery库,来实现模仿iPhone界面风格的单选框(radio)和复选框(checkbox)按钮。这个方法通过CSS样式和JavaScript事件处理来达到美观的效果,使传统的HTML表单...

Global site tag (gtag.js) - Google Analytics