复选框不会选中,但每个复选框都在注册第一次点击并将数据发送到服务器

checkboxes won't check but each checkbox is registering first click and sending data to server

我有一个 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。如果我单击第二个复选框,服务器会报告第二个复选框为真,其他复选框为假,但与第一个复选框的问题相同。

关于为什么会发生这种情况有什么想法吗?

此外,这是服务器端(烧瓶):

@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>

当您单击复选框时,该复选框变为选中状态,但您使用的是 return false,这会阻止 dom 的更新。 如果您希望摆脱 return 语句。

$(function () {
  $("[name=check]").on("click", function (event) {
    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)
    });
  });
});
<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>