帮助将onClick切换复选框转换为函数

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> 

JS在你domready中：

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-更多，只是一个事件添加到父，而不是创建100个事件和存储100个函数处理它。

这是编码模式，它涉及到改变你的标记，使事情工作。您还可以基于走过与点击项目相关的DOM来进行更改，例如， this.getParent().getElement("input[type=checkbox]")，或者其他的东西可能意味着你不需要在元素本身存储一个相对的id。