我需要在mootools中发挥作用。 OnChange一些复选框我需要设置border aroud image,并在隐藏输入中设置新值。此新值必须是所选图像的名称。
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;
}
答案 0 :(得分:1)
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);
}
});