image - 非表示の入力を変更 onChange チェックボックス

Question

mootools で関数を作成する必要があります。いくつかのチェックボックスを変更すると、画像の周りに境界線を設定し、非表示の入力に新しい値を設定する必要があります。この新しい値は、選択した画像の名前でなければなりません。

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

jsフィドル

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