チェックボックスがチェックされている場合にデータ属性を取得するには

Question

チェックボックスをオンにした場合、valueとdata-catというフォームからフォームを作成しました。 stackoverflowのおかげで、私はフォームの値を得ることができましたが、jqueryからデータ属性を達成するための満足な答えを得ることができません。

HTML：

<div class="price-col-title-wrap"> 
       <h4>Immer enthalten</h4> 
       <!-- <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3> --> 
        <input type="checkbox" id="c1" class="immer" value="50" data-cat="Installation Wordpress" name="cc" onclick="return false" checked/> 
        <label for="c1"><span> </span> Installation Wordpress</label> <br/> 

        <input type="checkbox" id="c2" class="immer" value="50" data-cat="Basis SEO und Dynamic Sitemap" name="cc"/> 
        <label for="c2"><span> </span> Basis SEO und Dynamic Sitemap</label> <br/> 

        <input type="checkbox" id="c3" class="immer" value="50" data-cat="Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil" name="cc"/> 
        <label for="c3"><span> </span> Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil</label> <br/> 

        <input type="checkbox" id="c4" class="immer" value="50" data-cat="Seite für Datenschutz und Impressum" name="cc"/> 
        <label for="c4"><span> </span> Seite für Datenschutz und Impressum</label> <br/> 

        <input type="checkbox" id="c5" class="immer" value="50" data-cat="Social Media Follow (FB, G+, Twitter)" name="cc"/> 
        <label for="c5"><span> </span> Social Media Follow (FB, G+, Twitter)</label> <br/> 

        <input type="checkbox" id="c6" class="immer" value="50" data-cat="Kontaktformular + Google Map API" name="cc"/> 
        <label for="c6"><span> </span> Kontaktformular + Google Map API</label> <br/> 
        <h3><span>CHF</span> <span id="immer-total">0</span>.-</h3> 
        <input id="input" type="text" value="0"/> 
        <textarea id="t"></textarea> 
      </div> 

私はすべてのチェックボックスから値を達成するためにjqueryのを持っていますが、それぞれのチェックボックスに一意の名前が含まれている別の属性data-catがあります。 私の問題は、私が使用しています今のjs件までtextareaそのid=t

にチェックインdata-catを一覧表示することである：これは、すべてのチェックボックス

そして後から値を取得するために使用され

var inputs = document.getElementsByClassName('immer'), 
     total = document.getElementById('immer-total'); 
for (var i=0; i < inputs.length; i++) { 
     inputs[i].onchange = function() { 
     var add = this.value * (this.checked ? 1 : -1); 
      total.innerHTML = parseFloat(total.innerHTML) + add 
      var new_total = parseFloat(document.getElementById('input').value); 
    console.log(new_total); 
    document.getElementById('input').value=new_total + add 

     } 
    } 

stackoverflowの多くのクエリ私は取得するjsを取得

function updateTextArea() {  
    var cats = $('.immer').map(function(){ 
return this.dataset.cat 
// or $(this).attr('data-cat') 
}).get() 
} 


$(function() { 
    $('#price-col-title-wrap input').click(updateTextArea); 
    updateTextArea(); 
    }); 

しかしそれは私を助けませんでした。 textareaにはどのようにしてdata-catを入手できますか？

あなたが簡単に行うことができます

you can view it on my fiddle

Answer 1

： - コンソールで

function updateTextArea() { 
    var cats = $('.immer').map(function() { 
    return $(this).data('cat'); 
    }).get(); 

    console.log(cats); 
} 

戻り値： -

["Installation Wordpress", "Basis SEO und Dynamic Sitemap", "Adresse, Öffungszeiten, Telefon mit Call-Funktion für mobil", "Seite für Datenschutz und Impressum", "Social Media Follow (FB, G+, Twitter)", "Kontaktformular + Google Map API"] 

テキストエリアにチェックインchecboxデータを取得するには、あなたが行うことができます：

$('.immer').change(function() { 
    $('#t').val(this.checked ? $(this).data('cat') : ''); 
}); 

Answer 2

jQuery data docsで定義されているように、データ属性は取得されず、.data（）関数で取得できます。

Ex。

$(this).data('cat')