Question

我有一个包含50个隐藏复选框的页面，我希望能够通过单击可见链接来切换每个复选框。实际的复选框必须保持隐藏......所以......有没有更好的方法来实现这一点，使用JS函数，所以我不必在每个链接中包含整个onclick？我使用的是mootools，而不是jQuery。

这可以激活一个复选框：

<a href="#template-selections" onclick="javascript:check('field_select_p10');" class="add_app">Select</a>

但要切换它，这可行：

onclick="if (event.target.tagName != 'INPUT') document.getElementById('field_select_temp_professional_10').checked = !document.getElementById('field_select_temp_professional_10').checked"

Answer 1

你发布的所有内容实际上都不是mootools代码，你也可以不使用mootools ......

标记：

<a href="#template-selections" data-id="10" class="add_app">Select</a>

你的domready中的js：

document.getElements("a.add_app").addEvents({
    click: function(e) {
        if (e.target.get("tag") != 'input') {
             var checkbox = document.id("field_select_p" + this.get("data-id"));
             checkbox.set("checked", !checkbox.get("checked"));
        }
    }
});

如果你有100多个，那么我建议你看看使用来自mootools-more的事件委托，只向父母添加一个事件，而不是创建100个事件并存储100个处理它的函数。

这是对模式的编码，它涉及更改标记以使事情有效。您还可以根据DOM相对于所点击的项目进行更改，例如this.getParent().getElement("input[type=checkbox]")或某事可能意味着您不需要在元素本身中存储相对ID。

帮助将onClick切换复选框包装到函数中

1 个答案: