更改隱藏的輸入onChange複選框

Question

我需要在mootools中創建函數。 OnChange一些複選框我需要設置邊框圖像，並在隱藏輸入中設置新值。這個新值必須是所選圖像的名稱。

jsFiddle Example

HTML

<form> 
    <div class="img_container"> 
     <img src="http://ynternet.sk/test/bg_1.png" /><br /> 
     <input type="checkbox" name="bg_1.jpg" id="__chbx" /> 
    </div> 
    <div class="img_container"> 
    <img src="http://ynternet.sk/test/bg_2.png" /><br /> 
    <input type="checkbox" name="bg_2.jpg" id="__chbx" /> 
    </div> 
    <div class="img_container"> 
     <img src="http://ynternet.sk/test/bg_3.png" /><br /> 
     <input type="checkbox" name="bg_2.jpg" id="__chbx" /> 
    </div> 

<input type="hidden" value="" name="selected_img"> 

CSS

.img_container { 
    padding:5px; 
    display:inline-block; 
} 

Answer 1

jsFiddle

var checks = document.getElements('input[type="checkbox"]'); 
var hidden = document.getElements('input[type="hidden"]')[0]; 
checks.addEvent('change',function(e){ 
    var checkbox = e.target; 
    var img = checkbox.getPrevious('img'); 
    var img_name = checkbox.get('name'); 

    var checked = checkbox.get('checked'); 
    if(checked){ 
    img.setStyle('border','1px solid red'); 
    hidden.set('value',img_name); 
    } 
    else{ 
    img.setStyle('border',null); 
    } 
});