Smarty / Dojo 复选框 onCheck 取消选中其他复选框答案

【问题标题】：Smarty / Dojo checkbox onCheck uncheck other checkboxSmarty / Dojo 复选框 onCheck 取消选中其他复选框
【发布时间】：2014-03-04 04:02:34
【问题描述】：

我在 smarty 文件中的一个应用程序中使用 Dojo 标签和复选框。如果选中了任何其他复选框，我想添加某种行为以取消选中复选框。我还检查了该复选框是否最初被选中，它会取消选中相同的。（我不想使用单选按钮）

这是我的一个 CheckBox 的代码：

<input id="form.cs"
     data-dojo-type='dijit.form.CheckBox'
     type="checkbox"    
     data-dojo-props="value:'true', type:'checkbox', name:'cs', style:'vertical-align: top'"
     onChange="if(dijit.byId('form.cs"').checked)                             
                  dijit.byId('form.cs"').set('checked', false);
               else 
                  dijit.byId(' form.nl"').set('checked', false);"
/>

代码的问题是当我添加花括号时，这不是由 smarty 引擎呈现并引发错误。

例如：

onChange="if(dijit.byId('form.cs"').checked) {                         
                  dijit.byId('form.cs"').set('checked', false); }
               else {
                  dijit.byId(' form.nl"').set('checked', false);"}

上面的代码 sn -p 将在 smarty 中创建故障。

【问题讨论】：

所以你想要一个单选按钮的行为而不使用单选按钮，请问为什么？
引入单选按钮导致了一些奇怪的布局问题。

标签： javascript checkbox dojo smarty

【解决方案1】：

我建议用 JavaScript 编写您的事件处理程序。如果您要将所有事件处理程序编写为属性，您将遇到很多问题，例如代码验证，...。

您可以编写一个实际上循环所有复选框的循环，将值设置为更改值的相反值（因此，如果一个复选框变为true，其他复选框必须变为false）。

为此，您可以编写一个像这样的简单函数：

var toggleCheckboxes = function(myNode, value) {
    query("input[type=checkbox]").forEach(function(node) {
        if (node !== myNode) {
            registry.getEnclosingWidget(node).set("value", !value, false);
        }
    });
};

dojo/query 模块允许您获取与给定选择器匹配的所有节点的列表。使用 dijit/registry 模块，您可以检索 DOM 节点后面的实际小部件，然后您只需使用以下方法设置值：

registry.getEnclosingWidget(node).set("value", !value, false);

第三个参数（设置为false）其实非常重要。此参数将阻止进一步的事件调用。如果你不把那个参数放在那里，它实际上会触发另一个onChange，导致无限循环。

现在您唯一需要做的就是将onChange 事件处理程序绑定到调用此函数的每个复选框，您也可以使用dojo/query 和dijit/registry 模块，例如：

query("input[type=checkbox]").forEach(function(node) {
    registry.getEnclosingWidget(node).on("change", function(value) {
       toggleCheckboxes(node, value);
    });
});

一个完整的例子可以在JSFiddle找到。

但我仍然建议使用单选按钮。我认为您实际上可以说这是一个糟糕的 UI 设计，复选框和单选按钮有不同的目标，将它们用于它们的目的。

【讨论】：