отображение данных в текстовом поле при выборе с помощью js

Question

У меня есть несколько ящиков. При выборе anybox я должен отображать его значение в текстовом поле. Предположим, что я выбираю коробку 1. Мне нужно отобразить значение в текстовом поле, и когда я отменю выбор, значение должно исчезнуть. Если я выбираю несколько ящиков, значения должны отображаться в текстовом поле, разделенном запятой.

Как это сделать?

Мой код:

<input type="text" id="selectedvalue" disabled="true" class="text" name="selectedvalue" /> 

<tr> 
<td> 
     <div class="box A1" id="A1"></div> 
</td> 
<td> 
     <div class="box A2"></div> 
</td> 
<td> 
     <div class="box A3"></div> 
</td> 
<td> 
     <div class="box A4 "></div> 
</td> 

</tr> 

Answer 1

Это можно легко сделать с помощью JQuery,

Вот код JavaScript для этого

var clickedBoxes=[]; 

$(".box").on("click", function() { 
    var clikedElem = $(this); 
    var text=''; 

    if(clikedElem.hasClass('clicked')){ 
    clikedElem.removeClass('clicked'); 
    clickedBoxes.splice(clickedBoxes.indexOf(clikedElem.text()),1); 
    } 
    else{ 
    clikedElem.addClass('clicked'); 
    clickedBoxes.push(clikedElem.text());  
    } 
    $('#selectedvalue').val(clickedBoxes); 
}); 

Вот полный JsFiddle example