Отображать выбранные значения флажков в div с помощью jQuery - PullRequest
Новая
       8

Отображать выбранные значения флажков в div с помощью jQuery

0 голосов
/ 17 августа 2010

У меня есть ряд флажков, и я хотел бы добавлять текстовое значение в div каждый раз, когда элемент выбирается, но я также хотел бы удалить элемент из текста div, когда элемент отменен.

Я предполагаю, что лучший способ был бы с каким-то массивом?Могу ли я получить некоторые рекомендации по этому вопросу?

edit: я должен был упомянуть, что это для контрольного списка ASP.NET (мой плохой), поэтому мой вывод выглядит примерно так: 

<div id="ctl00_ContentPlaceHolder1_divServices" style="width:450px; height:250px; overflow-y:scroll;">
                    <table id="ctl00_ContentPlaceHolder1_chklstServices" border="0">
<tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_0" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$0" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_0">Adhesives & Sealants</label></td>
</tr><tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_1" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$1" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_1">Air Ambulance</label></td>
</tr><tr>
    <td><input id="ctl00_ContentPlaceHolder1_chklstServices_2" type="checkbox" name="ctl00$ContentPlaceHolder1$chklstServices$2" onclick="ToggleBGColour(this);" /><label for="ctl00_ContentPlaceHolder1_chklstServices_2">Air Charter</label></td>
</tr>
</table>
</div>
<div id="selectedServices"></div>

Я на самом деле пытаюсь выполнить две вещи:

1) раскрасить (или удалить цвет) цвета фона ячейки при переключении флажка (сделать этот бит) 2) Добавить или удалить текст выбранных элементов, когдафлажки отмечены / не установлены

Мой код JavaScript / jquery: 

function ToggleBGColour(item) {

    var td = $(item).parent();      

    if (td.is('.rowSelected'))      
        td.removeClass("rowSelected");      
    else        
        td.addClass("rowSelected");     

}

1 Ответ

3 голосов
/ 17 августа 2010

Вы можете использовать .map() и Array.join(), например: 

$(":checkbox").change(function() {
  var arr = $(":checkbox:checked").map(function() { 
              return $(this).next().text();  //get the <label>'s text
            }).get();
  $("#myDiv").text(arr.join(','));
});

Всякий раз, когда флажок изменяется, он будет проходить через все отмеченные флажки, создавать массив их значений, а затем помещать его в виде строки с разделителями-запятыми в <div>.

Это пример, конечно, просто измените селекторы, чтобы сузить до флажков, которые вас интересуют. Вы можете попробовать здесь .

...