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，其中包含每个复选框的唯一名称。我的问题是在data-cat

的textarea中列出选中的id=t

到目前为止我使用的是：

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来获取attribute

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();
  });

但它并没有帮助我。如何获得data-cat中的textarea。

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"]

要在textarea中获取已检查的checbox数据，您可以执行以下操作：

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

Answer 2

正如在jQuery data docs中定义的那样，没有检索到data-属性，你可以用.data（）函数来获取它。

实施例

$(this).data('cat')

如果选中复选框，则获取数据属性

2 个答案: