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

[阿狸Ahri]

如图


我本来的写法是这样的

    $("#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就不执行了？
这好像搞得我好麻烦的样子

[阿狸Ahri]

引用 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了，后面的都不执行了，那都不能单选了

[天际的海浪]

引用 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" />？？？？？？？

[ddgx]

引用 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');
            }
    });

[逝_去_的_光_阴]

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

[阿狸Ahri]

引用 1 楼 u011376884 的回复:

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

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

[逝_去_的_光_阴]

引用 2 楼 edfdfg 的回复:

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

ie试试event.cancelBubble=true;

[ddgx]

$("#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);
                }
            });

[last way]

<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>

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

[qq_28936009]

//点击行勾选 $("#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(); });