在 Backbone 中查找所有选中的复选框答案

【问题标题】：Find All Checked Checkboxes in Backbone在 Backbone 中查找所有选中的复选框
【发布时间】：2014-12-08 01:20:36
【问题描述】：

我正在弹出一个 Bootstrap 模式，允许用户选择多个复选框。然后在我的视图中，我想遍历每个并检查它们是否被选中。

这是我的模式代码：

<div class="modal fade" id="ethnicityModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Ethnicity Targeting</h4>
      </div>
      <div class="modal-body">
        <h5>Select ethnicities that should be included:</h5>
        <input type="checkbox" name="caucasian"><label for="#caucasian"> Caucasian</label>
        <br>
        <input type="checkbox" name="black"><label for="#black"> African American</label>
        <br>
        <input type="checkbox" name="hispanic"><label for="#hispanic"> Hispanic/Latino</label>
        <br>
        <input type="checkbox" name="middleEastern"><label for="#middleEastern"> Middle Eastern</label>
        <br>
        <input type="checkbox" name="pacific"><label for="#pacific"> Pacific Islander</label>
        <br>
        <input type="checkbox" name="nativeAmerican"><label for="#nativeAmerican"> Native American/Alaskan</label>
        <br>
        <input type="checkbox" name="other"><label for="#other"> Other</label>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary saveEthnicity" data-dismiss="modal">Save</button>
      </div>
    </div>
  </div>
</div>

在我看来：

events:
   "click .saveEthnicity": "saveEthnicity"

saveEthnicity: (e) ->
    console.log e.currentTarget.parentElement.parentNode.children[1].children

所以e.currentTarget.parentElement.parentNode.children[1].children 返回子元素数组。但我似乎无法遍历它们。我试过了

e.currentTarget.parentElement.parentNode.children[1].children.each (child) ->
  console.log child

但这会引发错误。知道如何获取每个输入，以便在其上执行 .checked() 吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap backbone.js coffeescript

【解决方案1】：

如果 Backbone 视图正确地代表了您的模态窗口，那么您可以使用一些 jQuery 搜索所有选中的框：

var $checkedBoxes = this.$('input:checked');

来自Backbone docs：

每个视图都有一个 $ 函数，用于运行视图元素范围内的查询

如果视图不直接表示模态，那么您可以搜索 DOM 树，直到找到最近的模态：

var $checkedBoxes = $(e.currentTarget).closest('modal').find('input:checked')

【讨论】：

不完全-我实际上在该视图的模板中有许多模式，其中一些使用复选框。所以我想我可以为每个集合添加一个独特的类，然后从那里开始。
@TomHammond 你绝对应该使用一些东西来识别按钮提交的模式。
@TomHammond 我给了你一个替代方案。

【解决方案2】：

children 属性不是一个数组，它是一个HTMLCollection，试试这个：

children = [].slice.apply(e.currentTarget.parentElement.parentNode.children[1].children)
children.forEach (child) -> console.log(child)

【讨论】：

啊，这很有意义。感谢您的帮助！