jq 如何点击table的一行任意地方后，选中checkbox

2015-06-13 10:09:03 3.1k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

华为ENSP虚拟网络与本地物理网卡高效桥接实战指南本文提供了一份详细的华为ENSP虚拟网络与本地物理网卡桥接实战指南。通过清晰的四步操作，帮助用户打破虚拟实验环境的“孤岛”限制，实现ENSP设备与真实局域网及互联网的互通，从而进行更真实的协议测试、软件升级和混合网络环境搭建。阅读详情

如图

我本来的写法是这样的



    $("#tdClassInfo").on("click", "tr", function () {

                var input = $(this).find("input");

                if ($(input).attr("checked")) {

                    $(input).removeAttr("checked");

                }

               else

                {

                    $("#tdClassInfo tr").find("input").each(function () {

                        $(this).removeAttr("checked");

                    });

                    $(input).attr("checked", true);

                }

            });

用了好久相安无事。昨晚我发现一个问题，就是如果用户点击的时候，点击的恰好是checkbox的时候，那么执行顺序是
checkbox打钩或者去掉勾 -----执行checkbox click事件 ----执行tr点击事件。

这样问题就来了，如果我点击chexkbox，那他先把勾选上了，那么此时的checked ==true,一会执行上面的代码的时候,
直接跳到true的 if语句里面了，这个语句直接又把checked状态去了。这样就相当于没点。

现在我愁死了，都不知道怎么弄，
我刚才想用点击tr的时候，主动调用checkbox的点击事件，结果执行了一下发现是个死循环，一直都在alert，我都不知道怎么回事。



 $("#tdClassInfo").on("click", "tr", function () {

                var input = $(this).find("input");

                $(input).click();

});

 $("#tdClassInfo").on("click", "tr input", function () {

                alert(2222) //这个alert一直在弹出来，死循环的

            });

我现在都不知道怎么搞，难道要tr判断一次，checkbox又判断一次？中间定义一个全局的bool变量，然后checkbox点击了，tr就不执行了？
这好像搞得我好麻烦的样子

...全文

Meta DINOv3实战指南：如何用7B参数ViT模型提升你的视觉任务性能（附Hugging Face部署教程）本文提供了Meta DINOv3 7B参数ViT模型的实战部署指南。文章详细解析了该自监督视觉模型的优势，并重点演示了如何在Hugging Face平台上高效加载这一大规模模型，同时给出了图像分类、语义分割等下游任务的性能提升技巧与代码示例，帮助开发者在实际视觉任务中应用这一前沿技术。阅读详情

阿狸Ahri

JavaScript 87,983 成员 224,681 内容

+ 关注 + 加入社区

切换为时间正序

qq_28936009 2016-07-21

打赏
举报

//点击行勾选 $("#Qub_tb_List").on("click", "tr", function () { var input = $(this).find("input"); //alert($(input).prop("checked")); if (!$(input).prop("checked")) { $(input).prop("checked",true); }else{ $(input).prop("checked",false); } }); //多选框防止事件冒泡 $("#Qub_tb_List").on("click", "input", function (event) { event.stopImmediatePropagation(); });

last way 2015-10-16

打赏
举报

<td>
	<div style="position:relative;width: 100%; height: 100%;top: 0px; left: 0px;">
		<input name="_id" type="radio" value="1"/>
		<div style="position:absolute;z-index: 2;width: 100%; height: 100%;top: 0px; left: 0px;opacity: 1;"></div>
	</div>
</td>

加个透明层放到单选/复选框的上面，让他点不到就可以了

ddgx 2015-06-13

打赏
举报

$("#tdClassInfo").on("click", "tr", function (e) {
                if(e.target.type==='checkbox'){
                    return;
                }
                var input = $(this).find("input");
                if ($(input).attr("checked")) {
                    $(input).removeAttr("checked");
                }
               else
                {
                    $("#tdClassInfo tr").find("input").each(function () {
                        $(this).removeAttr("checked");
                    });
                    $(input).attr("checked", true);
                }
            });

逝_去_的_光_阴 2015-06-13

打赏
举报

引用 2 楼 edfdfg 的回复:

测试了一下好像也不行 return false 直接无效 event.stopPropagation();好像ie 不支持？提示没有这个对象

ie试试event.cancelBubble=true;

阿狸Ahri 2015-06-13

打赏
举报

引用 1 楼 u011376884 的回复:

checkbox click事件加上阻止事件冒泡或者checkbox click事件最后直接return false function(event){ event.stopPropagation(); }

测试了一下好像也不行 return false 直接无效 event.stopPropagation();好像ie 不支持？提示没有这个对象

逝_去_的_光_阴 2015-06-13

打赏
举报

checkbox click事件加上阻止事件冒泡或者checkbox click事件最后直接return false function(event){ event.stopPropagation(); }

ddgx 2015-06-13

打赏
举报

引用 5 楼 edfdfg 的回复:

[quote=引用 4 楼 wangwei703 的回复:]

$("#tdClassInfo").on("click", "tr", function (e) {
                if(e.target.type==='checkbox'){
                    return;
                }
                var input = $(this).find("input");
                if ($(input).attr("checked")) {
                    $(input).removeAttr("checked");
                }
               else
                {
                    $("#tdClassInfo tr").find("input").each(function () {
                        $(this).removeAttr("checked");
                    });
                    $(input).attr("checked", true);
                }
            });

这样不行，当点击checkbox的时候，直接return了，后面的都不执行了，那都不能单选了[/quote] 想单选的话再加一段监听checkbox的

   $('#tdClassInfo :checkbox').on("change",function() {
            if ($(this).attr('checked')) {
                $('#tdClassInfo :checkbox').removeAttr('checked');
                $(this).attr('checked', 'checked');
            }
    });

天际的海浪 2015-06-13

打赏
举报

引用 5 楼 edfdfg 的回复:

[quote=引用 4 楼 wangwei703 的回复:]

$("#tdClassInfo").on("click", "tr", function (e) {
                if(e.target.type==='checkbox'){
                    return;
                }
                var input = $(this).find("input");
                if ($(input).attr("checked")) {
                    $(input).removeAttr("checked");
                }
               else
                {
                    $("#tdClassInfo tr").find("input").each(function () {
                        $(this).removeAttr("checked");
                    });
                    $(input).attr("checked", true);
                }
            });

这样不行，当点击checkbox的时候，直接return了，后面的都不执行了，那都不能单选了[/quote] 你要单选为什么不用<input type="radio" />，而用<input type="checkbox" />？？？？？？？

阿狸Ahri 2015-06-13

打赏
举报

引用 4 楼 wangwei703 的回复:

$("#tdClassInfo").on("click", "tr", function (e) {
                if(e.target.type==='checkbox'){
                    return;
                }
                var input = $(this).find("input");
                if ($(input).attr("checked")) {
                    $(input).removeAttr("checked");
                }
               else
                {
                    $("#tdClassInfo tr").find("input").each(function () {
                        $(this).removeAttr("checked");
                    });
                    $(input).attr("checked", true);
                }
            });

这样不行，当点击checkbox的时候，直接return了，后面的都不执行了，那都不能单选了

jq 如何点击table的一行任意地方后，选中checkbox

相关推荐