javascript - 处理 "Switchlike"复选框的模式名称-6ren

javascript - 处理 "Switchlike"复选框的模式名称

转载作者：塔克拉玛干更新时间：2023-11-03 06:02:25

我正在尝试处理一个我无法确定其名称的问题(因此在谷歌搜索时遇到麻烦)。

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

以下是细节:

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

并发症:

区域之间存在重叠状态。
点击美国东北部，然后关闭其中一个州，然后点击东南部等等，现在让我简单明了的逻辑变得困惑。

可能的解决方案:

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

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

感谢阅读!

最佳答案

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

有2种情况:

复选框未选中(即打开)。它必须查找依赖于它的所有 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);
     });
})();