如果複選框已打開，將類添加到DIV

Question

我需要腳本幫助才能在隱藏複選框被選中時將「活動」類添加到div。這一切都發生在一個有點複雜的形式中，可以保存並稍後編輯。這裏的過程：

我有一系列隱藏的複選框，當點擊一個可見的DIV時被選中。由於幾個人，尤其是貝爾巴托夫克里斯托夫從這裏以前的帖子，我有處理一切幾個簡單的腳本：

1. 一個人點擊一個div：

   <div class="thumb left prodata" data-id="7">腳本非常重要</div>

2. 有源類被添加到div：

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

3. 相應的複選框是檢查：

   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。基本上顛倒過程。我試圖找出自己的想法，並希望發佈一個想法，但是我嘗試過的任何事情都是壞的。我想我至少在我工作時會發布這個問題。提前致謝！

Answer 1

好了，如果有人有興趣，這裏是最終溶液。它的作用是：爲DIV類創建一個單擊事件來切換活動類onclick，並使用data-id =「X」=複選框ID將每個DIV關聯到複選框。最後，如果表單被重新加載（在這種情況下，表單可以保存並稍後編輯），最後一段JavaScript會看到在頁面加載時檢查了哪些複選框，並觸發DIV的活動類。

要看到這一切，請在此處查看：https://www.worklabs.ca/2/add-new/add-new?itemetype=website（腳本當前正在第三個選項卡上選擇CHOOSE STYLE）。除非您是會員，否則您將無法保存/編輯它，但它可以工作:)您可以使用螢火蟲取消隱藏複選框並自行切換複選框以查看。

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

    }); 

Answer 2

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

實施例：http://jsfiddle.net/vCH9n/