Изменить скрытый ввод при изменении флажков

Мне нужно сделать функцию в 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;
 }

image input checkbox hidden mootools
person Patrik    schedule 21.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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);   
  }
});
person Adidi    schedule 21.03.2013
comment
Спасибо, это прекрасно работает... но у меня есть более динамично добавленные скрытые входы. Как сделать эту функцию только для скрытого ввода с именем selected_img? jsfiddle.net/ynternet/pfJYh/4 - person Patrik; 21.03.2013
comment
var hidden = document.getElements('input[type=hidden][name=selected_img]')[0]; - person Adidi; 21.03.2013
comment
Другой вопрос... :) Когда у меня уже есть значение для этого скрытого ввода? Это значение представляет собой строку, содержащую все имена изображений... Когда я выбираю/отключаю какой-либо флажок, мне нужно добавить/удалить имя изображения из этой строки в скрытом вводе. jsfiddle.net/ynternet/pfJYh/5 - person Patrik; 21.03.2013
comment
поскольку теперь это зависит от нескольких элементов, сделайте это во внешней функции: http://jsfiddle.net/pfJYh/7/ - person Adidi; 22.03.2013
comment
Спасибо большое, вы лучшие :) - person Patrik; 22.03.2013