处理“Switchlike”复选框的模式名称答案

【问题标题】：The name of the pattern that deals with "Switchlike" checkboxes处理“Switchlike”复选框的模式名称
【发布时间】：2013-04-06 11:16:01
【问题描述】：

我正在尝试处理一个我无法准确命名的问题（因此无法在谷歌上搜索）。

它处理一组类似“开关”的复选框。

这里是细节：

我正在使用image mapster plugin，其复选框设置与该演示类似。
复选框是从州名生成的，单击它们会调用 mapster 来打开/关闭州。
我正在使用一组额外的复选框，称为“美国东北部”、“美国东南部”等。
单击“Northeast”必须打开该地区的所有州。再次单击应将其关闭。很简单。

并发症：

区域之间存在重叠状态。
点击美国东北部，然后关闭其中一个州，然后点击东南部等，现在我的简单直接逻辑混淆了。

可能的解决方案：

我需要这些第三级复选框充当“开关”，跟踪复选框和映射器区域的状态。
Northeast 必须足够智能，以便在以下情况之一时自行关闭复选框是手动点击的。
点击东南不可混淆NE的数据状态，因为状态重叠……等等。

我正在寻找以前处理过此类问题的设计模式。如果有人知道一种没有真正名称的解决方案模式，那么也欢迎这种知识。

感谢阅读！

【问题讨论】：

你把它弄得太复杂了。只需在此处放置一个名为 Northeast USA 的复选框，然后单击它，选中所有属于该区域的州的 mapster 复选框。
也许你要找的词是“toggle”。
嗨，Ejay，现在确实是这样的...... NE et al 只是“愚蠢的切换器”，它只是从复选框中删除所有选择数据并将它们切换为“打开” '。但我真的需要开关功能才能工作。 @didierc 我相信这比切换更多...
在数学中不是集合论吗？
我不认为我了解您要完成的工作的每一个细节，但 ImageMapster 具有一些内置功能，可以独立于每个区域的状态来管理区域组，例如：jsfiddle.net/eaf2G

标签： javascript jquery algorithm design-patterns imagemapster

【解决方案1】：

我相信你只需要依赖 checkboxen 的 javascript onclick 事件。

有两种情况：

复选框未选中（即它已打开）。它必须根据它查找所有的boxen，如果它们被选中，则调用它们的click 方法。
复选框被选中。它必须查找它所依赖的所有boxen，如果它们未被选中，则调用它们的click 方法。

依赖图可以描述为一个矩阵，列和行索引表示框号，矩阵单元格是行框依赖、依赖还是与列框无关。

您可能希望使用单独的数组来保持框名称和索引之间的映射。

当然，您必须确保依赖关系图中没有循环，否则您最终会导致事件触发器递归调用自身。

更新：

我尝试了自己的解决方案，看看效果如何。

HTML 文档：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 <table>
  <thead>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <colgroup>
    <col width='80'>
    <col width='20'>
    </colgroup>
    <tr>
    <th colspan="2">Level 1</th>
    <th colspan="2">Level 2</th>
    <th colspan="2">Level 3</th>
    </tr>
  <tbody>
    <tr>
      <td colspan='4'></td>
      <td rowspan='0'><label for='top' >top</label></td>
      <td rowspan='0'><input type='checkbox' id='top' value=''/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp1' >grp1</label></td>
      <td rowspan='3'><input type='checkbox' id='grp1' value=''/></td>
    </tr>
    <tr>
      <td><label for='id1' >id1</label></td>
      <td><input type='checkbox' id='id1' value='abc'/></td>
    </tr>
    <tr>
      <td><label for='id2' >id2</label></td>
      <td><input type='checkbox' id='id2' value='def'/></td>
    </tr>
    <tr>
      <td><label for='id3' >id3</label></td>
      <td><input type='checkbox' id='id3' value='ghi'/></td>
    </tr>
    <tr>
      <td colspan='2'></td>
      <td rowspan='3'><label for='grp2' >grp2</label></td>
      <td rowspan='3'><input type='checkbox' id='grp2' value=''/></td>
    </tr>
    <tr>
      <td><label for='id4' >id4</label></td>
      <td><input type='checkbox' id='id4' value='klm'/></td>
    </tr>
    <tr>
      <td><label for='id5' >id5</label></td>
      <td><input type='checkbox' id='id5' value='nop'/></td>
    </tr>
    <tr>
      <td><label for='id6' >id6</label></td>
      <td><input type='checkbox' id='id6' value='qrs'/></td>
    </tr>
  </tbody>
</table>
<hr>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/multicheck.js" type="text/javascript"></script>
</body>
</html>

和javascript文件：

var data = {
    depends: {
        id1 : ['grp1'],
        id2 : ['grp1'],
        id3 : ['grp1', 'grp2'],
        id4 : ['grp2'],
        id5 : ['grp2', 'grp1'],
        id6 : ['grp2'],
        grp1 : ['top'],
        grp2 : ['top']
    },
    owns : {
        grp1 : ['id1','id2','id3', 'id5'],
        grp2 : ['id4','id5','id6', 'id3'],
        top  : ['grp1','grp2']
    }    
};

function check(elt){
    var target = elt.target;
    if (!target.checked) {
        // unchecking -> uncheck depends
        for (e in data.depends[target.id]) {
            $("input#"+data.depends[target.id][e]).each(
                function(){
                    if (this.checked)
                        this.click();
                });
        }
    }
    else {
        // checking -> check owns
        for (e in data.owns[target.id]) {
            $("input#"+data.owns[target.id][e]).each(
                function (){
                    if (!this.checked)
                        this.click();
                });
        }
    }
    return true;
}

(function(){
     $(document).ready(function(){
         $("input[type='checkbox']").bind('click',check);
     });
})();

数据对象包含所有依赖信息：depends列出所有“直接依赖”关系，owns列出反向关系。

虽然它表示依赖图，但我直接使用 boxen 的 id 作为索引，并将其拆分为两个。

例子：

每当top 被检查时，所有其他boxen 也会被级联检查（grp1 首先检查它拥有的所有ID，然后grp2 同样）。
只要 id5 未选中，grp1、top 和 grp2 就会按此级联顺序取消选中。

_Remark：我不是 jquery 精通，所以可能有更简洁的方法来获得相同的结果。 _

【讨论】：

哇，感谢您的示例代码！我会试试这个然后回来。再次感谢！
很高兴你喜欢它。我发现这个问题很有趣。

【解决方案2】：

这就是集合论的用武之地。

您可以使用三态复选框来表示零件选择。看这里。 tristate checkboxes in html

有一个jQuery三态复选框插件here

【讨论】：