Question

我在我的某个网页中使用了复选框和复选框列表。

用户界面就像

颜色 - 标题复选框

复选框列表项

红色

绿色

蓝

黄色

完成选择 - 单击标题复选框选择/取消选择整个复选框列表。

复选框列表的部分选择显示带有不同背景颜色的标题复选框，以指示部分选择。

我检查每个复选框列表选择更改中所选项目的数量。在客户端服务器环境中，存在时间延迟，如果我们在复选框列表中进行两次连续选择，则对第一次选择进行标题控制的更新，并且在刷新UI时，第二次选择消失。我还使用JavaScript实现了上面的一个，但是行为也是一样的。有什么可以替代呢？

Answer 1

你的问题不是特别清楚，但听起来你想要某种三态复选框？这听起来像回发正在发生并消灭你的第二个选择？

如果是这样，那里有一些控制选项。这是一个可能有用的链接。 http://www.chadscharf.com/index.php/2008/10/3-state-checkbox-using-microsoft-ajax/

你真的需要发布一些代码并链接到你提到的屏幕截图。

Answer 2

您尝试满足两种方案，最简单的方法是使用Javascript。当然，一个方向是使用Jquery简化DOM元素的连接。

以下是一个涵盖这两个场景的示例。一个顶级控件检查/取消选中所有元素。其次，个人改变了顶级元素的背景。这不是drop and run代码，它只是单独演示了这种技术。如果您不熟悉Jquery，我会给您留下更改和调整：只需搜索Jquery站点上的每个功能。享受！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){       

            // Wire up the 'select-all' to the child elements
            $('#topLevel').bind('change' , function(){
                // Record this object
                var base = this;
                // Change the child elements
                $('#checkboxContainer input').each( function(){
                    $(this).attr('checked' , $(base).is(':checked'))
                })                  
            });

            // Make the individual checkbox selects alter the
            // background of the top-level wrapper
            $('#checkboxContainer input').bind('change' , function(){
                // Get a handle to the top item
                var topLevel = $('#topLevelWrapper');                   
                // Have we selected the item?
                if($(this).is(':checked')){
                    // Remove the previous class assignments
                    topLevel.attr('class' , '');
                    // Assign the current css class from the parent
                    topLevel.addClass( $(this).parent().attr('class') );                        
                }
            });

        })
    </script>

    <style type="text/css">
        .Red{
            background-color:#F00;
        }
        .Green{
            background-color:#0F0;
        }
        .Blue{
            background-color:#00F;
        }
    </style>
</head>
<body>

    <div id="topLevelWrapper">
        <label for="topLevel">Top level selection</label>
        <input type="checkbox" id="topLevel" />
    </div>

    <div id="checkboxContainer">
        <ul>
            <li class="Red">
                <label for="topLevel">Red</label>
                <input type="checkbox" />
            </li>
            <li class="Blue">
                <label for="topLevel">Blue</label>
                <input type="checkbox" />
            </li>
            <li class="Green">
                <label for="topLevel">Green</label>
                <input type="checkbox" />
            </li>

        </ul>

    </div>

</body>

ASP.net UI刷新问题

2 个答案: