如果在加载时选中复选框，则将类添加到 DIV

Question

我需要有关脚本的帮助，以在选中隐藏复选框时将“活动”类添加到 div。这一切都发生在一个有点复杂的形式中，可以保存并稍后编辑。过程如下：

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

1. 一个人点击一个 div：

   yadda yadda

2. 一个活动类添加到 div 中：

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

3. 相应的复选框被选中：

   document.getElements("a.add_app").addEvents({
   单击：函数（e）{
       if (e.target.get("tag") != '输入') {
            var checkbox = document.id("field_select_p" + this.get("data-id"));
            checkbox.set("已选中", !checkbox.get("已选中"));
       }
   }
   

   });

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

Answer 1

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

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

Answer 2

好吧，如果有人感兴趣的话，这是最终的解决方案。其作用是：为 DIV 类创建一个单击事件以切换活动类 onclick，并且还使用 = 复选框 ID 的 data-id="X" 将每个 DIV 与复选框相关联。最后，如果重新加载表单（在这种情况下，可以保存表单并稍后进行编辑），最后一段 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"));
        }
      }
    });

  });