Question

我在下面有一个jsfiddle应用程序：

http://jsfiddle.net/ybZvv/5/

如果你打开jsfiddle，你会看到一个包含“Answer”按钮的顶部控件。您还会看到一些字母按钮，一个“True”按钮和一个“False”按钮。

“True”和“False”按钮工作正常，这意味着如果用户单击“True”然后单击“False”，它将替换文本输入，因为您无法同时回答“True”和“错误”。

这适用于“是”和“否”按钮。

但是字母按钮有问题。如果单击字母按钮，您会发现可以单击多个字母按钮，这很好，但问题是它替换了那些不正确的字母的文本输入。如果选择了多个字母按钮，则它应显示所有这些字母按钮的文本输入，而不是用选择的最新字母按钮替换文本输入。

我知道下面的代码

_oCurrAnswerContainer.html('');

清空容器DIV，因此在创建新输入之前删除输入。

但我只想在“真”和“假”按钮以及“是”和“否”按钮之间发生这种情况。如果选择多个字母按钮，则不应清空容器：

如果按钮A，C和E打开，则显示文本输入A，C和E，如果E然后关闭，则删除E的文本输入。

Answer 1

我猜你想要追加。你为什么不能这样编写代码？

_oCurrAnswerContainer.html(_oCurrAnswerContainer.html() + '' + NewContents);

附加到它。我不确定，因为我不明白这个问题。

Answer 2

似乎解决方案是每次用户做出选择或取消选择一个字母时，不断检查所选字母。

示例：

<script type='text/javascript'>

    var checkboxes = $('form > p > input:checkbox');

    // updates the text input with the selected values...
    var update = function() {
        var values = [];

        $('form > p > input:checked').each(function(idx, cb) {
            values.push($(this).val());
        });

        $('#foo').val(values.join(', '));
    };

    // count the number of selected items...
    var count = function() {
        var n = $("input:checked").length;
        $("div").text([n, 'box selected!'].join(' '));
    };

    // bind to the checkbox for clicks
    // update the input field
    // count the number of selected items
    $(checkboxes).on('click', function(e) {
        update();
        count();
    });

    update();

    count();
</script>

有关工作示例，请参阅此gist

选择多个按钮时如何允许多个输入

2 个答案: