如果选中复选框 onload，则将类添加到 DIV答案

【问题标题】：Add class to DIV if checkbox is checked onload如果选中复选框 onload，则将类添加到 DIV
【发布时间】：2011-04-26 21:17:29
【问题描述】：

我需要帮助脚本在检查隐藏复选框时向div添加“活动”类。这一切都发生在一个有点复杂的表格中，可以保存并在以后进行编辑。流程如下：

我有一系列隐藏的复选框，当单击可见的 DIV 时会选中这些复选框。感谢一些人，尤其是之前帖子中的 Dimitar Christoff，我有一些简单的脚本可以处理所有事情：

一个人点击了一个div：

<div class="thumb left prodata" data-id="7">yadda yadda</div>

将一个活动类添加到 div：

  $$('.thumb').addEvent('click', function(){
    this.toggleClass('tactive');
  });

对应的复选框被选中：

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"));
    }
}

});

现在，我需要第四个（也是最后一个）函数来完成项目（使用 mootools 或仅使用普通 javascript，不使用 jQuery）。保存后加载表单时，我需要一种方法将活动类添加回相应的 div。基本上颠倒这个过程。我正在尝试自己弄清楚，并且很想发表一个想法，但是我尝试过的任何事情都不好。我想我至少会在处理这个问题时发布这个问题。提前致谢！

【问题讨论】：

标签： checkbox mootools addclass

【解决方案1】：

window.addEvents({
  load: function(){
    if (checkbox.checked){
      document.getElements('.thumb').fireEvent('click');
    }
  }
});

示例：http://jsfiddle.net/vCH9n/

【讨论】：

好的，你是说我可以“触发”已经存在的点击功能。这似乎是个好主意，但我不确定如何为正确的 DIV / 复选框 ID 对触发该事件。 IE：data-id="7" 的 div 与复选框 field_select_p_7 相关，那么我如何告诉 data-id="7" 的 div 向该 div 添加一个类？可以按原样完成，还是我需要为我的所有 div 添加唯一 ID？那是我想不通的部分。
好的，我已经用工作代码创建了一个 jsFiddle，然后开始研究一种遍历复选框的方法。如何告诉对应的div的复选框处于活动状态，仍然无法弄清楚：jsfiddle.net/marcodeluca/A6PR8/29

【解决方案2】：

好的，如果有人感兴趣，这是最终的解决方案。它的作用是：为 DIV 类创建一个单击事件以在单击时切换活动类，并使用 data-id="X" 将每个 DIV 关联到一个复选框，该复选框 = 复选框 ID。最后，如果重新加载表单（在这种情况下，表单可以保存并稍后编辑），最后一段 javascript 然后查看页面加载时检查了哪些复选框并触发 DIV 的活动类。

要查看这一切，请在此处查看：https://www.worklabs.ca/2/add-new/add-new?itemetype=website（脚本目前正在第三个选项卡上运行，选择样式）。但是，除非您是会员，否则您将无法保存/编辑它，但它可以工作:) 您可以使用 firebug 取消隐藏复选框并自己切换复选框以查看。

window.addEvent('domready', function() {

// apply the psuedo event to some elements
$$('.thumb').addEvent('click', function() {
    this.toggleClass('tactive');
});

$$('.cbox').addEvent('click', function() {
   var checkboxes= $$('.cbox');

       for(i=1; i<=checkboxes.length; i++){
               if(checkboxes[i-1].checked){
               if($('c_'+checkboxes[i-1].id))
                       $('c_'+checkboxes[i-1].id).set("class", "thumb tactive");
               }
       else{
               if($('c_'+checkboxes[i-1].id))
                       $('c_'+checkboxes[i-1].id).set("class", "thumb");
               }
       }
});

// Add the active class to the corresponding div when a checkbox is checked onLoad... basic idea:
var checkboxes= $$('.cbox');

for(i=1; i<=checkboxes.length; i++){
    if(checkboxes[i-1].checked){
       $('c_field_tmp_'+i).set("class", "thumb tactive");
    }
}

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

  });

【讨论】：