Question

我正在弹出一个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()吗？

Answer 1

如果Backbone视图正确表示您的模态窗口，那么您只需使用一些jQuery搜索所有选中的复选框：

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

来自Backbone docs：

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

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

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

Answer 2

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

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

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

2 个答案: