Question

我有一个多选复选框选项。就像不同的状态下拉一样。用户可以检查多个州。我的要求是当用户检查选中状态名称需要显示的任何复选框时。如果他选择阿拉斯加，需要展示阿拉斯加和如果他选择另一个阿拉巴马州需要同时展示两者。

但是我现在的代码显示出一些奇怪的东西。

mycode的

<p id="selectedid" class="selected_class"></p>

options.each(function() {
    $("#selectedid").insertAfter($(this).text() + ', ');
});

另一个代码

options.each(function() {
    $("#selectedid").append($(this).text() + ', ');
});

但是当我使用$("#selectedid").html($(this).text() + ', ');时，始终会显示一个选定的选项，旧选项将替换为新选项。对我来说，当用户检查阿拉斯加时它首先显示的是p标签中的阿拉斯加。第二次如果用户检查Alabama它正在显示

第二个结果

Alaska , Alaska, Arizona

如果用户检查阿肯色州，则第三次显示

第三个结果

Alabama, Alabama, Arizona, Alabama, Arizona, Arkansas

我的实际要求是用户选择的需要显示的选项，以及他是否撤消需要隐藏的支票。假设如果他选择3个状态，则只需显示3个状态，如

Alabama
Arizona
Arkansas

我没有得到我做错的地方。

Answer 1

options.each(function() {
if(!$("#selectedid").find($(this)).length)
$("#selectedid").append($(this).text() + '<br/>');
});

Answer 2

帮了吗？

http://jsfiddle.net/yq56t8cu/2/

HTML

<input name="options" type="checkbox" value="Alabama" checked="checked"/ > Alabama
<input name="options" type="checkbox" value="Arizona" / > Arizona

<p id="selectedid" class="selected_class"></p>

的JavaScript

$("input[name='options']").click(showAll);

function showAll() {
    var options = $("input[name='options']:checked");
    var temp = "";


    options.each(function() {
        temp += $(this).val();
        temp += "<br\>";

    });

    $("#selectedid").html(temp);
}

showAll();

如何为每次点击为div添加新文本？

2 个答案: