`
hbhgjiangkun
  • 浏览: 105894 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

JQuery触发Checkbox的change事件

 
阅读更多

JQuery触发Checkbox的change事件

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层。
初始代码如下:
$(function(){
$("#ischange").change(function() {
alert("checked");
});
});
捣腾了半天,竟然一点反应都没有。百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框不会立即弹出对话框。
必须在选中或取消复选框之后再点击除了复选框之外的任何一个地方,据说是因为IE会等到复选框失去焦点之后才会触发change事件。
改进之后的代码如下:
$(function(){
if ($.browser.msie) {
$('input:checkbox').click(function () {
this.blur();
this.focus();
});
};
$("#ischange").change(function() {
alert("checked");
});
});
补充:当改变复选框的值后,IE在等待失去焦点,但是click事件是立即触发的,因此利用click事件让复选框失去 焦点,这样就会触发chang事件了,然后再把焦点重新转移到该复选框上。
如果是radio,将checkbox换成radio即可。
分享到:
评论

相关推荐

    JQuery触发radio或checkbox的change事件

    在JQuery中,当给radio或checkbox添加一个change事件时,如果它的值发生变化就会触发change事件;本文将详细介绍如何利用JQuery触发Checkbox的change事件需要了解的朋友可以参考下

    JQuery操作checkbox、radio等示例

    4. **触发事件**:jQuery允许我们监听用户的交互,比如当checkbox或radio的状态改变时。使用`.change()`方法可以添加事件监听器。例如,`$("#myCheckbox").change(function() { ... })`会在checkbox状态改变时执行回...

    jquery input checkbox 联动

    总结,实现“jquery input checkbox 联动”主要是通过监听 `change` 事件,然后在事件回调中根据DOM结构和业务规则更新相关复选框的状态。这种联动效果常见于层级关系的展示,如目录树、权限管理等场景,使得用户...

    Prototype与jQuery美化Checkbox复选框实例.zip

    此外,jQuery的事件绑定机制如`click()`、`change()`等,可以轻松添加交互效果。 在美化Checkbox的过程中,通常会涉及到以下几个方面: 1. **CSS样式覆盖**:使用CSS来改变复选框的默认样式,这包括设置边框、背景...

    jquery模拟div多选checkbox下拉框

    通过以上分析,我们可以看出“jquery模拟div多选checkbox下拉框”是一个结合了jQuery、DOM操作、事件处理、CSS定制和数据管理的综合性组件。开发者在使用这个压缩包中的`selectbox`文件时,只需按照提供的API和示例...

    JQuery 自定义 radio与checkbox

    jQuery提供了丰富的事件处理函数,如`.click()`, `.change()`, `.focus()`等,可以监听用户对radio和checkbox的操作。例如,当用户点击一个radio按钮时,可以触发一个事件来更新其他同组radio的样式,确保只有一个被...

    JQuery实现checkbox的全/不全选,以及反选功能

    1. **绑定事件**:使用jQuery的`on()`方法,我们可以监听主复选框的`change`事件。例如,假设我们的主复选框ID为`select-all`,可以这样写: ```javascript $('#select-all').on('change', function() { // 在...

    jQuery中:checkbox选择器用法实例

    `:checkbox`选择器的语法非常简洁,正如其名,只需在jQuery的选择器表达式中加上`:checkbox`即可。例如: ```javascript $(":checkbox") ``` 这行代码会选取页面上所有的复选框元素。 下面是一个关于`:checkbox`...

    jquery实现checkbox全选全不选的简单实例

    我们可以通过绑定`change`事件,当复选框状态改变时,执行一个函数来更新其他复选框的状态。 5. **全选和全不选的实现逻辑**: - **全选**:当用户点击全选复选框时,将所有其他复选框的状态设置为选中。 - **全...

    基于jQuery Bootstrap3的Checkbox元素美化特效代码.zip

    例如,我们可以用jQuery来监听Checkbox的点击事件,当Checkbox状态改变时,触发特定的动画或者改变其他元素的样式。 在压缩包内的文件132687043641720954可能是实现这些功能的JavaScript代码或HTML模板。通常,这种...

    jQuery实现复选框checkbox全选、反选功能.rar

    要实现全选和反选功能,我们可以编写jQuery函数,分别绑定到"selectAll"复选框的`change`事件上。当用户点击全选复选框时,这些函数将检查或取消所有其他复选框的状态。 首先,我们需要获取所有待选的复选框,这...

    Jquery Change与bind事件代码

    `change`事件主要用于监听表单元素,如输入框(input)、选择框(select)或复选框(checkbox)等,当其值发生改变并失去焦点时触发。例如,如果你有一个文本输入框,并希望在用户输入内容后验证其有效性,可以使用`change...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    `onchange` 事件是 JavaScript 中的一个重要事件,它会在元素的值发生改变并失去焦点后触发。在 EasyUI 中,`onchange` 事件同样适用于 `easyui-textbox` 和 `easyui-combobox`,可以用来监听用户在这些组件上的操作...

    JQuery插件之全选与反选

    在jQuery中实现这一功能,主要涉及到遍历DOM元素、操作CSS类和触发事件。 首先,我们需要理解HTML中的Checkbox元素。Checkbox允许用户对多个选项进行选择,通常会有一个关联的`<label>`元素来提供可点击的文本。...

    jquery实现 复选框 选中和不选中 美化复选框

    接下来,我们使用jQuery来监听复选框的`change`事件,当用户点击复选框时触发该事件。然后,根据复选框的状态,更新美化后的元素的类名,从而改变其显示效果。 ```javascript $(document).ready(function() { $...

    自定义checkbox样式,

    例如,当`checkbox`被点击时,我们可以使用`change()`事件来触发一个函数,该函数可以更新关联的CSS类,从而改变`checkbox`的外观。同时,`jQuery`还提供了`addClass()`和`removeClass()`方法,方便我们动态地添加或...

    checkbox二级联动-亲测有效

    这需要监听每个复选框的change事件,并根据当前选中状态更新其他复选框。 3. **自身状态的判断**:复选框的状态可能受到其他复选框的影响,需要实时检查自身是否应该被选中。例如,当所有子节点都被选中时,父节点...

    js获得Gridview中选中checkbox行的信息

    `this`关键字代表触发事件的元素,即当前的Checkbox。 3. **获取行信息**:为了获取当前行的其他信息,我们需要找到Checkbox所在行的DOM元素。这可以通过相对定位(如`parentNode`和`previousElementSibling`)...

Global site tag (gtag.js) - Google Analytics