I have a javascript function that retrieves checkbox values and sends data to server on click:
$(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;
});
});
In my test environment, I initialize all checkboxes to be unchecked. I click the first checkbox and data is sent to server and reported back as True for first checkbox and false for the others. This works as expected, however, the first checkbox remains unchecked. Also, if I click the first checkbox again, nothing happens. I would expect for the server to now report back false for the first checkbox and false for the others. If I click the second checkbox the server reports back true for the second checkbox and false for the others but has the same issue the first checkbox had.
Any ideas as to why this may be happening?
Also, here is the server side(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)
And here is the 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"></div>
Aucun commentaire:
Enregistrer un commentaire