复选框不会选中,但每个复选框都在注册第一次点击并将数据发送到服务器
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>
我有一个 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>