热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

单击div以选中/取消选中复选框-Clickadivtocheck/uncheckacheckbox

Iappliedthefollowingcodetomaketablerowscheckuncheckachildcheckboxwhenclicked.NowId

I applied the following code to make table rows check/uncheck a child checkbox when clicked. Now I discovered that when clicking the checkbox itself inside the row it doesent check. Could it be that it checks on click (standard function) and then the jquery picks up the click event and unchecks it? How can I fix this?

我应用以下代码在单击时检查/取消选中子复选框。现在我发现,当在行中单击复选框本身时,它不会进行检查。它是否可以检查单击(标准函数),然后jquery获取单击事件并取消检查?我该怎么解决这个问题呢?

//check on div click
$("tr").live("click",function() {
    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
        checkbox.attr("checked","true");
    } else {
        checkbox.attr("checked","");
    }
});

4 个解决方案

#1


6  

I suspect that the click event is bubbling from the checkbox to the tr. Try adding this code as well:

我怀疑单击事件正在从复选框中冒泡到tr中。请尝试添加以下代码:

$('tr input[type=checkbox]').click(function(e){
        e.stopPropagation();
});

EDIT

编辑

here's an example: http://jsfiddle.net/GSqNv/

这里有一个例子:http://jsfiddle.net/GSqNv/

#2


2  

Check the target of the caller is not a checkbox

检查调用者的目标不是复选框

$("tr").live("click",function(event) {
    var target = $(event.target);
    if (target.is('input:checkbox')) return;

    var checkbox = $(this).find("input[type='checkbox']");

    if( checkbox.attr("checked") == "" ){
       checkbox.attr("checked","true");
    } else {
       checkbox.attr("checked","");
    }
});

DEMO http://jsfiddle.net/7Bze7/

演示http://jsfiddle.net/7Bze7/

The code above checks that the sender of the event is not a checkbox.

上面的代码检查事件的发送者不是复选框。

#3


0  

Besides the given solutions, isn't it better to just set the checkbox to the oposite state? For example:

除了给定的解决方案,将复选框设置为oposite状态不是更好吗?例如:

var _current_state = checkbox.attr("checked");
checkbox.attr("checked") = !_current_state;

#4


0  

What about:

是什么:

return false;

As it is the same as entering both:

因为它和输入两者是一样的:

e.preventDefault(); 
e.stopPropagation();

I believe that is the go to - no?

我相信这是去-不?


推荐阅读
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • 本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先,介绍了如何正确引入必要的脚本文件,如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着,通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交,包括数据的发送、接收和处理。此外,还讨论了该方法在不同场景下的应用,如文件上传、表单验证和动态更新页面内容等,提供了丰富的代码示例和最佳实践建议。 ... [详细]
  • 使用vue.js实现checkbox的全选,和多个的删除欢迎大家来我的博客浏览更多的干货内容www.jaxqin.comtemplate代码:<template> ... [详细]
  • 本文探讨了如何在 Java 中将多参数方法通过 Lambda 表达式传递给一个接受 List 的 Function。具体分析了 `OrderUtil` 类中的 `runInBatches` 方法及其使用场景。 ... [详细]
  • oracle c3p0 dword 60,web_day10 dbcp c3p0 dbutils
    createdatabasemydbcharactersetutf8;alertdatabasemydbcharactersetutf8;1.自定义连接池为了不去经常创建连接和释放 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 开机自启动的几种方式
    0x01快速自启动目录快速启动目录自启动方式源于Windows中的一个目录,这个目录一般叫启动或者Startup。位于该目录下的PE文件会在开机后进行自启动 ... [详细]
  • 本地存储组件实现对IE低版本浏览器的兼容性支持 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • Android ListView 自定义 CheckBox 实现列表项多选功能详解
    本文详细介绍了在Android开发中如何在ListView的每一行添加CheckBox,以实现列表项的多选功能。用户不仅可以通过点击复选框来选择项目,还可以通过点击列表的任意一行来完成选中操作,提升了用户体验和操作便捷性。同时,文章还探讨了相关的事件处理机制和布局优化技巧,帮助开发者更好地实现这一功能。 ... [详细]
  • 本文深入解析了HTML表格与表单元素,特别是图像映射技术的应用。详细介绍了如何利用 `` 标签实现内容的行列对齐,并探讨了 HTML4 中 Flash 的引入及其在网页设计中的应用。通过实例展示了 `` 标签的使用方法,帮助开发者更好地理解和掌握这些核心元素。 ... [详细]
author-avatar
374439252亮
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有