我有一个javascript函数，可检索复选框值，并在单击时将数据发送到服务器：

$(function() {
$("[name=check]").on("click",function() {
var res = {};
var vals = $("[name=" + this.name + "]").each(function()
{
res[this.value] = this.checked;
}).get();
$.getJSON('/_filter',{
        b: JSON.stringify(res),},function(data) {
        $('.results').html(data.results)
      });
    return false;
});
});

在测试环境中，我将所有复选框初始化为未选中状态。我单击第一个复选框，数据将发送到服务器，并报告为第一个复选框为True，其他报告为false。这可以按预期工作，但是，第一个复选框保持未选中状态。另外，如果我再次单击第一个复选框，则什么也不会发生。我希望服务器现在将第一个复选框报告为false，而将其他报告为false。如果单击第二个复选框，则服务器对第二个复选框报告为true，对其他报告为false，但是第一个复选框具有相同的问题。

关于为什么会发生这种情况的任何想法？

此外，这是服务器端（烧瓶）：

@app.route('/_filter')
def filterthis():
  checkbox = request.args.get('b')
  checkbox_dict = json.loads(checkbox)

  first = checkbox_dict['first']
  second = checkbox_dict['second']
  third = checkbox_dict['third']
  fourth = checkbox_dict['fourth']

  output= str(first) + str(second) + str(third) + str(fourth)

  return jsonify(results=output)

这是index.html：

<ul class="filterSection">
    <li>
        <strong>Show:</strong>
        <input type="checkbox" name="check" value="first"/>
        <label>First</label>
    </li>
    <li>
        <input type="checkbox" name="check" value="second"/>
        <label>Second</label>
    </li>

     <li>
        <input type="checkbox" name="check" value="third"/>
        <label>Third</label>
    </li>
     <li>
        <input type="checkbox" name="check" value="fourth"/>
        <label>Fourth</label>
    </li>
</ul>

<div class="results">{{ results|safe }}</div>