How should I reorganize my control flow for query based on radio input selected?

问题

I've been listening to the click event of label elements, but the selected input[type="radio"] does not seem to update during the event. Should I be listening to a different event or do I need to change my control flow somehow? Below is the code:

$(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>

Edit

Right now, the query reflects the previously selected input rather than the currently selected one.

My expected behavior is for the query to reflect the input that was just selected, and for the function to be called every time a label is clicked.

Second Edit

I added in @Tushar's suggestion. I don't want this because it does not update the timestamp when the same label is clicked multiple times.

回答1:

I ended up using this to get the label, then used its for attribute to get the input element I needed:

$(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>

来源：https://stackoverflow.com/questions/34815656/how-should-i-reorganize-my-control-flow-for-query-based-on-radio-input-selected