Question

我有一个非常复杂的下拉菜单，里面有很多控件。因此，我需要在下拉容器的点击事件中使用e.stopPropagation()。

这一切都很好;当用户选择下拉列表中的任何内容时，它将保持打开状态。问题出在复选框和单选按钮上。当用户选择它们时，在UI中它们将其标记为已选中但代码不会将checked类添加到其中。因此，当我想从下拉列表中检索所有已检查的项目时，它将返回一个空列表。

我假设发生这种情况是因为下拉列表中的点击事件。我知道我可以覆盖复选框的点击事件来手动添加已检查的类，但这对于扩展下拉列表非常有用。

我正在使用Marionette Views来构建下拉列表。

更新：

我删除了e.stopPropagation（）并且它仍然没有在html中检查过类，即使在UI中选中了复选框。

Answer 1

为什么不选择选中的复选框，而不是搜索“已检查的”复选框。类。试试这个：

$('#checkbox_container_id').find(':checkbox:checked');

Answer 2

另一个选项 - 您可以在选择CSS类时将其切换到复选框/单选按钮吗？

几周前我有一个场景，用户应该可以选择多个状态。以下是我最终跟踪的方式：

    events:
      "click .state": "stateSelected"
      "click .saveStates": "saveStates"

    saveStates: (e) ->
        if @state != ""
            @model.set(state: @state, demographic: true)
            $('#stateButton').addClass("selected")
        else
            @model.set(state: null)
            $('#stateButton').removeClass("selected")

    stateSelected: (e) ->
            @email = @model.get('email')
            $(e.currentTarget).toggleClass("selected")
            if e.currentTarget.classList[1] == "selected"
                if @state != ""
                    @state = @state + "|" + e.currentTarget.textContent.toLowerCase()
                else
                    @state = e.currentTarget.textContent.toLowerCase()
            else
                state = @state.split("|")
                state.splice(state.indexOf(e.currentTarget.textContent.toLowerCase()), 1)
                stateRequirements = ""
                state.forEach (requirements) ->
                    if stateRequirements != ""
                        stateRequirements = stateRequirements + "|" + requirements.toLowerCase()
                    else 
                        stateRequirements = requirements.toLowerCase()

                @state = stateRequirements  

            if e.currentTarget.textContent == "Select All"
                e.currentTarget.textContent = "Unselect All"
                $(".state").addClass("selected")
                states = ""
                $(".state").each (state) ->                     
                    if $(this).text() != "Unselect All"
                        if states != ""
                            states = states + "|" + $(this).text().toLowerCase() 
                        else
                            states = $(this).text().toLowerCase()

                @state = states
            else if e.currentTarget.textContent == "Unselect All"
                e.currentTarget.textContent = "Select All"
                $(".state").removeClass("selected")
                @state = ""

希望这对一般的想法有所帮助。

下拉列表中的复选框没有检查类

2 个答案: