0

一連のチェックボックスがあり、アイテムが選択されるたびにテキスト値をdivに追加したいのですが、アイテムの選択が解除されたときにdivのテキストからアイテムを削除したいと思います。

ある種の配列を使用するのが最善の方法だと思いますか？これについてのガイダンスをもらえますか？

編集：これは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>

私は実際に2つのことを達成しようとしています：

1）チェックボックスが切り替えられたときにセルの背景色を色付け（または色を削除）します（このビットを実行します）2）チェックボックスがオン/オフになっているときに選択した項目のテキストを追加または削除します

私のjavascript/jqueryコード：

function ToggleBGColour(item) {

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

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

}
4

1 に答える 1

3

次のように.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>.

もちろん、これは一例です。セレクターを変更して、関心のあるチェックボックスに絞り込むだけです。 ここで試してみることができます。

于 2010-08-17T17:28:09.580 に答える