javascript - 动态显示选中的复选框值列表 js/jquery

Question

我想使用 javascript 动态显示所选选项的列表或jQuery当用户改变他的选项时。PS:我正在使用Django + Python生成选项和 bootstrap来设计它们的样式。

这是我的代码:

{% for option in options %}
    <div class="input-group" style="margin-bottom: 7px;">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" name="checks[]" aria-label="Radio button for following text input" class="option_choice" class="ipad_pro" value="{{ option.name }}">
            </div>
        </div>
        <input style="background-color: #fff;" type="text" class="form-control" disabled=True value="{{ option.name }} {{ option.price }}€" aria-label="Text input with radio button">
    </div>
{% endfor %}
<ul id='options_display'></ul>

这是我尝试过的:

var getChecked= function() {
    var n = $("input:checked");
    var options_display = $("#options_list")
    console.log(n)
    if (n.length != 0) {
            $.each(n, function(index, value) {
            options_display.append("<li>" + value.defaultValue + "</li>")
        });
    }
    else {
        options_display.html("<h3 class'text-center'>No Options</h3>")
    }
};
getChecked()
$( "input[type=checkbox]" ).on( "click", getChecked);

问题是它不会重置 <ul> 的内容这意味着当我选择一个新元素时，我会获得两次元素。如果您知道我的问题的答案，请帮助我。

Answer 1

您可以在每次点击时清空options_display，例如

$("#options_list").empty();

在条件之前。