image - 更改隐藏的输入 onChange 复选框

Question

我需要在 mootools 中实现功能。OnChange 一些复选框我需要设置图像边框，并在隐藏输入中设置新值。这个新值必须是所选图像的名称。

jsFiddle 示例

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