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();

患病前。

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

1 个答案: