javascript - 如何获取 Meteor 中单击的单选按钮

Question

我对 Meteor 完全陌生，我正在尝试构建一个简单的应用程序。我目前有一个带有 4 个单选选项和一个提交按钮的表单。当用户单击提交按钮时，我想知道他们选择了哪个单选选项。但我不知道如何开始。谁能帮我？下面分别是我的 html 和 javascript 代码:

<form class="form-horizontal well mystery-form">
    <fieldset class="col-md-offset-1">
      <h2>{{question}}</h2>
      <br>
      <div class="form-group">
        <div class="col-md-10 mystery-form">
          {{#each answers}}
          <div class="radio">
            <label>
              <input type="radio" name="mysteryForm" checked="" 
                     style="margin-bottom: 0; margin-top: 0;">
              {{answer}}
            </label>
          </div>
          {{/each}}
          <br>
          <button type="reset" class="btn btn-default">Back</button>
          <!-- Hide this when the answer is correct -->
          <button type="submit" class="btn btn-primary">Check Answer</button>
          <!-- Show only if the answer is correct -->
          <button class="btn btn-primary">Next</button>
        </div>
      </div>
    </fieldset>
  </form>

JS:

Template.mystery.events({
"submit .mystery-form": function(event) {

 // no idea what to do here

}
});

Answer 1

语义

您可能想要删除整个包装 .radio 元素。这是没有必要的。尝试使用尽可能少的元素。它性能更好并且使调试更容易。

检索已检查的输入

传递给 event-map 的事件对象回调有一个属性target。在你的情况下，这是.mystery-form。所以你可以使用一个简单的 jQuery 选择器来查找选中的元素:

$('input[name="mysteryForm"]:checked', event.target)

这将为您提供名为mysteryForm的检查值。这很安静。问题是检索值。这样做会变得有点困惑。所以我只是将它作为 data- 属性传递给元素:

<input type="radio" name="mysteryForm" checked="" style="margin-bottom: 0; margin-top: 0;" data-answer="{{ answer }}" >

现在您可以简单地执行以下操作:

$('input[name="mysteryForm"]:checked', event.target).data('answer')