2

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

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

2 ответа 2

1
var radio = document.querySelectorAll(".size input[type='radio']");
var demo = document.querySelector('#dropdownMenuButtonn');

function checkBox(e){
  demo.textContent = this.value;
}

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

К тому же класс size у вас применяется и к родительскому елементу. Для выбора всех input вам нужно было сделать так:

var radio = document.querySelectorAll("input[type=radio]");

var radio = document.querySelectorAll("input[type=radio]");
var demo = document.getElementById('dropdownMenuButtonn');
  
function checkBox(e){
    
  demo.textContent = this.value;

}

radio.forEach(check => {
  check.addEventListener("change", checkBox);
});
<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>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.