Question

我很难找到我正在搜索的内容，很可能是因为我不确定如何在Google搜索中很好地表达它。

基本上我想要做的是显示30个左右的按钮，然后用户可以选择。选择后，按钮会更改颜色，表示已选择特定选项。用户需要从30个选项中选择10个。然后应该汇总结果（基本上计算每个选择的唯一按钮）并显示给可以登录并查看结果的其他用户。

多个用户应该能够选择这些选项并记录其结果。

我不打算创建下拉列表，多列表或复选框解决方案。到目前为止，在我的研究中，我发现了很多关于此类选项的参考资料。此外，Javascript限制用户可以选择的最小/最大复选框数。

我希望这是有道理的。任何协助确定执行此任务的最佳方法将不胜感激。

谢谢，

-Nathan

Answer 1

你可以做什么，你可以创建30个按钮，并将每个按钮连接到一个隐藏的复选框，然后你可以将它发布到服务器，例如。

<input type="checkbox" value="1" name="chk_one" id="chk_one" style="display: none;">
<input type="button" value="Check Box One" id="btn_one"/>

<强> CSS

input[type="button"].selected { color: red; }
input[type="button"] { color: black; }

然后你可以编写jQuery解决方案，以使其改变颜色：

var _minLength = 10;
var _maxLength = 30;
    $(document).ready(function() {
        $('#submit_id').click(function() { 
           if($('#form_id input[type="checkbox"]').is(':checked').length < _minLength) 
            { 
              alert('you need to select at least ' + _minLength + ' of buttons'); return false; 
            };});
        $('#form_id input [type="button"]').click(function() {
            var _id = $(this).attr('id').toString().split('_')[1];
            if(_id != null)
            {
               var _chckBox = $('#chk_'+_id);
               var _newState =  _checkBox.attr('checked') ? false, true;
               if($('#form_id input[type="checkbox"]').is(':checked').length+1 > _maxLength)
                  return;


               _checkBox.attr('checked', _newState);
               if(_checkBox.attr('checked'))
                  $(this).addClass('selected');
               else
                  $(this).removeClass('selected');
             }
        });
    });

上面的方法会将点击事件附加到您使用“＃form_id”指定的区域中的每个按钮，然后点击它将显示隐藏状态的隐藏状态，并将设置或删除按钮中的类，它取决于复选框状态。

顺便提一下，复选框的数量不受限制。

允许用户选择多个选项，聚合结果和显示

1 个答案: