Question

我正在尝试处理一个我不能完全放置的问题（因此无法使用谷歌搜索）。

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

以下是具体内容：

我正在使用image mapster plugin，其复选框设置类似于该演示。
复选框是从州名称生成的，点击它们会调用mapster来打开/关闭状态。
我正在使用另一组名为“Northeast USA”，“Southeast USA”等的复选框。
点击“Northeast”必须打开该地区的所有州。再次单击应将其关闭。很简单。

并发症：

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

可能的解决方案：

我需要这些第三级复选框作为“开关”，跟踪复选框和地图集区域的状态。
东北必须足够聪明才能在其中一个时自动关闭手动点击复选框。
单击“东南”不得混淆NE的数据状态，因为状态重叠......等等。

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

感谢阅读！

Answer 1

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

有两种情况：

正在取消选中该复选框（即，它已启用）。它必须根据它查找所有boxen，如果选中它们，请调用它们的click方法。
正在检查复选框。它必须查找它所依赖的所有盒子，如果未选中它们，请调用它们的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精通，所以可能有一种更简洁的方法来获得相同的结果。 _

Answer 2

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

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

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

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

2 个答案: