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

Question

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

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

此外，这是服务器端( flask ):

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

Answer 1

当您单击复选框时，该复选框会被选中，但您正在使用 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>