我应该如何根据所选的无线电输入重新组织查询的控制流

Question

我一直在收听label元素的click事件，但所选input[type="radio"]似乎在事件期间没有更新。我应该侦听其他事件还是需要以某种方式更改我的控制流？下面是代码：

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();
    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click"]').html(query + ' at ' + time);
  });
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();
    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) " event: ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>
  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>
  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>
  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>
  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>
  <div class="query" data-method="click"></div>
  <div class="query" data-method="change"></div>
</form>

编辑

现在，查询反映的是以前选择的input，而不是当前选择的。

我的预期行为是让查询反映刚刚选择的input，并在每次单击label时调用函数。

第二次编辑

我补充了@Tushar的建议。我不想要这个，因为当多次单击同一标签时，它不会更新时间戳。

Answer 1

我最终使用 this 来获取label，然后使用它的 for 属性来获取我需要的input元素：

$(function() {
  $('#reported label').click(function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();
    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event"]').html(query + ' at ' + time);
  });
  $('#reported input[name="filter"]').on('change', function() {
    var query = $('input[name="filter"]:checked').val();
    var time = (new Date()).toString();
    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="change event"]').html(query + ' at ' + time);
  });
  
  $('#reported label').click(function() {
    var query = $('#' + $(this).attr('for')).val();
    var time = (new Date()).toString();
    // this is filler but I'm actually making an xhr request here
    $('.query[data-method="click event with this"]').html(query + ' at ' + time);
  });
});

input[name="filter"] {
  display: none;
}
#reported label {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.query {
  padding: 5px;
  margin: 5px;
}
.query:before {
  content: "on " attr(data-method) ": ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reported">
  <input type="radio" name="filter" id="question" value="questions" checked="checked">
  <label for="question">Questions</label>
  <input type="radio" name="filter" id="answer" value="answers">
  <label for="answer">Answers</label>
  <input type="radio" name="filter" id="comment" value="comments">
  <label for="comment">Comments</label>
  <input type="radio" name="filter" id="user" value="users">
  <label for="user">Users</label>
  <input type="radio" name="filter" id="company" value="companies">
  <label for="company">Companies</label>
  <div class="query" data-method="click event"></div>
  <div class="query" data-method="change event"></div>
  <div class="query" data-method="click event with this"></div>
</form>