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

【问题标题】：How to allow multiple inputs when multiple buttons are selected选择多个按钮时如何允许多个输入
【发布时间】：2012-10-06 10:17:08
【问题描述】：

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

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

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

“真”和“假”按钮完美运行，这意味着如果用户单击“真”然后单击“假”，它会替换文本输入，因为您无法同时回答“真”和“假”。

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

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

我知道下面的代码

_oCurrAnswerContainer.html('');

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

但我只希望在“True”和“False”按钮以及“Yes”和“No”按钮之间发生这种情况。如果您选择多个字母按钮，则不应清空容器：

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

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

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

【讨论】：

我的意思是，如果是“真”或“假”按钮，或者是“是”或“否”按钮，则执行_oCurrAnswerContainer.html(''); 代码。但如果是字母按钮，则执行oCurrAnswerContainer.html(_oCurrAnswerContainer.html() + '' + NewContents);。这可能吗？

【解决方案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 以获取工作示例

【讨论】：