TransWikia.com

JQuery - Поместить в div data-атрибуты нескольких активных чекбоксов

Stack Overflow на русском Asked by vantal on December 15, 2020

Получилось вывести в консоль, но не получается поместить в div(желательно через запятую)

$('.calc-block').on('change', function(){
  let stena = $('.calc-block input:checked + span');
  stena.each(function(){ 
    console.log($(this).attr('data-title'));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
    <div class="calc-block-title">Что будет на стенах?</div>
    <div class="calc-block-subtitle">Выберите один или несколько пунктов</div>
    <div class="calc-checkbox">
        <label>
            <input type="checkbox"> 
            <span data-title="Обои">Обои</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Краска">Краска</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Фотообои">Фотообои</span>
        </label>
    </div>
</div>

<div class="calc-total3-1">
  <div class="item">тут нужно вывести активные чекбоксы</div>
</div>
javascriptjquery

2 Answers

Перед циклом создать переменную - пустую строку, в цикле добавлять значение data в эту строку:

$('.calc-block').on('change', function() {
  let $wall = $('.calc-block input:checked + span');
  
  let txt = "";
  
  $wall.each(function() {
    txt += $(this).data("title") + ", ";
  });
  
  txt = txt.slice(0, -2); // Удалить последние два символа (лишние запятая и пробел)
  
  $(this).parent().find(".calc-total3-1 .item").text( txt );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
  <div class="calc-checkbox">
    <label><input type="checkbox"><span data-title="Обои">Обои</span></label>
    <label><input type="checkbox"><span data-title="Краска">Краска</span></label>
    <label><input type="checkbox"><span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span></label>
    <label><input type="checkbox"><span data-title="Фотообои">Фотообои</span></label>
  </div>
</div>

<div class="calc-total3-1">
  <div class="item">тут нужно вывести активные чекбоксы</div>
</div>

Хотя, у jQuery-объектов есть встроенный map, похожий на обычный Array.map()

$('.calc-block').on('change', function() {
  let $wall = $('.calc-block input:checked + span');

  let list = $wall.map( (i, el) => $(el).data("title") );
  let txt = [].join.call(list, ", ");

  $(this).parent().find(".calc-total3-1 .item").text(txt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
  <div class="calc-checkbox">
    <label><input type="checkbox"><span data-title="Обои">Обои</span></label>
    <label><input type="checkbox"><span data-title="Краска">Краска</span></label>
    <label><input type="checkbox"><span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span></label>
    <label><input type="checkbox"><span data-title="Фотообои">Фотообои</span></label>
  </div>
</div>

<div class="calc-total3-1">
  <div class="item">тут нужно вывести активные чекбоксы</div>
</div>

[].join.call(list, ", "); — join собирает строку из массива, Но jQuery объект (list) - не массив, у него нет такого метода. JS позволяет взять метод у одного объекта, и вызвать в контексте другого → Function.prototype.call()

Correct answer by OPTIMUS PRIME on December 15, 2020

const output = $('.item');
$('.calc-block').on('change', function() {
  output.text($(':checked + span', this).map((i, el) => el.dataset.title).get().join(', '));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="calc-block">
    <div class="calc-block-title">Что будет на стенах?</div>
    <div class="calc-block-subtitle">Выберите один или несколько пунктов</div>
    <div class="calc-checkbox">
        <label>
            <input type="checkbox"> 
            <span data-title="Обои">Обои</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Краска">Краска</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Гипсокартонные элементы">Гипсокартонные элементы</span>
        </label>
        <label>
            <input type="checkbox"> 
            <span data-title="Фотообои">Фотообои</span>
        </label>
    </div>
</div>

<div class="calc-total3-1">
  <div class="item">тут нужно вывести активные чекбоксы</div>
</div>

Answered by Deonis on December 15, 2020

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP