获取已单击复选框 ID 的方法不起作用

Question

单击 Admin 下的任何子树复选框时，none 方法检索并显示我的 js 工作中单击的元素的 ID。所有尝试 return 未定义。那么获取id需要什么？

            <div class="tree" style="border: currentColor; border-image: none; height: 1200px; -ms-overflow-y: hidden;">
                <ul class="nav nav-list" style="border: currentColor; border-image: none;">
                    <li>
                        <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#MMenu_DTID1">
                            <span class="checkbox MMTree-checkbox styled red"><input name="SM_IsPermitted1" class="MMTree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                            <input name="MM_IsPermitted1" type="hidden" value="false">
                            Admin
                        </span>
                        <ul class="nav nav-list collapse" id="MMenu_DTID1" style="padding-left: 20px;">
                            <li>
                                <span class="accordion-heading" aria-expanded="false" data-toggle="collapse" data-target="#S_menu1">
                                    <span class="checkbox subtree-checkbox styled red"><input name="SM_IsPermitted1" class="subtree-checkbox styled red" id="SM_IsPermitted1" style="display: none;" type="checkbox" value="false" iid="1"></span>
                                    <input name="SM_IsPermitted1" type="hidden" value="false">
                                    Users
                                </span>
                                <ul class="nav nav-list collapse" id="S_menu1" style="padding-left: 60px;">
                                    <li>
                                        <span class="accordion-heading" data-toggle="collapse" data-target="#S_menu11">
                                            <span class="checkbox subtree-checkbox styled red">
                                              <input name="SM_IsPermitted11"  class="subtree-checkbox styled red" 
                                                     id="SM_IsPermitted11" style="display: none;" type="checkbox" value="false" iid="2">
                                            </span>
                                            <input name="SM_IsPermitted11" type="hidden" value="false">                                                 
                                             testGetID
                                        </span>
                                    </li>
                                </ul>

                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

$(function ()
{
 $(".subtree-checkbox").click(function (e)
 {
        var idx = $(this).attr('id');
     var idxx = $(this).prop('id');
     alert("e.target.id = " + e.target.id);
            alert("id = " + idx);
     alert("idxx = " + idxx);
     });
});

Answer 1

您将事件挂接到 span，而不是复选框。勾选复选框，然后使用 this.id 获取 id:

$(".subtree-checkbox input[type=checkbox]").click(function (e) {
    var id = this.id;
    // ...
});

或者如果您需要挂钩 span，请使用 find 找到复选框：

$(".subtree-checkbox").click(function (e) {
    var id = $(this).find("input[type=checkbox]").attr("id");
    // ...
});

或者（少一点jQuery）querySelector:

$(".subtree-checkbox").click(function (e) {
    var id = this.querySelector("input[type=checkbox]").id;
    // ...
});

获取已单击复选框 ID 的方法不起作用

Methods to get the id of the clicked on checkbox not working

jquery

dom

jquery-events