Как при нажатии на radio, его value перевести в текст кнопки?

Question

[maksell]

Есть вот такая кнопка с выпадающими элементами

<div class="dropdown size">
                        <button class="btn for_size" type="button" id="dropdownMenuButtonn" data-toggle="dropdown" data-display="static"  >  
                            Выбрать размер
                        </button>
                        <div class="dropdown-menu size position-static w-100 ">
                            {% for size in item.size.all %}  
                            <input class="form-check-input size" type="radio" id = "{{size}}"  name = "size" value = {{size}} required>
                            <label class="dropdown-item " for="{{size}}"  name ="size" >{{size}}</label>
                            {% endfor %}
                        </div>
                    </div>

Я хочу, чтобы после нажатия на label, текст кнопки "Выбрать размер" изменился на value этого инпута

Пока есть вот такой скрипт, но он работает не корректно. Он срабатывает,когда я нажимаю на кнопку "Выбрать размер", а должен после нажатия на label, так как если я ничего не выберу то текст "Выбрать размер" пропадает и остается кнопка без текста. Всем спасибо

var radio = document.querySelectorAll(".size");
var demo = document.getElementById('dropdownMenuButtonn').firstChild;
  
function checkBox(e){
    
	demo.data = e.target.value;

}

radio.forEach(check => {
	check.addEventListener("click", checkBox);
});

Comments

[0xD34F]

document.querySelector('.dropdown-menu').addEventListener('change', function(e) {
  document.querySelector('.dropdown .btn').textContent = e.target.value;
});

https://jsfiddle.net/phbr37Lm/