0

Господа! Помогите пожалуйста )

Как передать значение label в другой div при изменении input`ов? Выбрал к примеру chekbox - содержимое его label уходит в div в другом месте... Снял флажок, значение удалилась. А?

<body>
  <input id="che1" name="che1" type="checkbox">
  <label for="che1">Самость</label>
  
  <input id="che2" name="che" type="radio">
  <label for="che2">Первое</label>
  
  <input id="che3" name="che" type="radio">
  <label for="che3">Или второе</label>

  <div class="innerHere"></div>
</body>

0

3 ответа 3

1

Этот вариант если input один и innerHereтоже

const che1 = document.querySelector('#che1');
const innerHere = document.querySelector('.innerHere');
che1.addEventListener('change', function() {
  innerHere.innerHTML = (che1.checked) ? document.querySelector('#che').innerHTML : ''
})
<input id="che1" name="che1" type="checkbox">
<label id="che" for="che1">Самость</label>


<div class="innerHere"></div>


Второй вариант с несколькоми input_radio

const innerHere = document.querySelector('.innerHere');

[...document.querySelectorAll('input')].forEach(function(s, i) {
  s.addEventListener('change', function() {
    innerHere.innerHTML = document.querySelectorAll('label')[i].innerHTML
  })
});
<input id="che1" name="che" type="radio">
<label id="che_1" for="che1">Самость1</label>

<input id="che2" name="che" type="radio">
<label id="che_2" for="che2">Самость2</label>

<input id="che3" name="che" type="radio">
<label id="che_3" for="che3">Самость3</label>

<div class="innerHere"></div>

2
  • Прикольная штука получается, можно будет display : none-ом скрывать содержимое class="innerHere"... Просто и легко, но мне все таки интересно было бы с js`ом попробовать, посмотреть хотя бы) Спасибо!
    – jujujus
    19 фев 2018 в 4:24
  • Учти, display : none используя теряешь плавность )))))
    – Air
    19 фев 2018 в 4:44
1

Сделал при условии использования Jquery

Мой JS

$('input:radio').click(function(){
        a = $(this).attr('id');
        b = $("label[for='"+a+"']").text();
        $('.innerHere').text(b)
    });
<input id="che1" name="che" type="radio">
<label id="che_1" for="che1">Самость1</label>
<input id="che2" name="che" type="radio">
<label id="che_2" for="che2">Самость2</label>
<input id="che3" name="che" type="radio">
<label id="che_3" for="che3">Самость3</label>
<div class="innerHere"></div>

Выглядит намного красивее что вам скидывали выше :)

0
<input id="che1" name="che1" type="checkbox" onchange="onChange(this)">
<label for="che1">Или второе</label>

<div class="innerHere"></div>
<script>
    function onChange(that) {
        var inpId = that.getAttribute("id");
        var text = document.querySelector("label[for=" + inpId + "]").innerHTML;
    document.querySelector(".innerHere").innerHTML = that.checked ? text : "";
    }
</script>
13
  • Jamshed, а как быть если у меня к примеру уже есть функция onchange="" на input`ах?
    – jujujus
    19 фев 2018 в 4:32
  • Можно вызвать эту функцию из той которая у Вас уже имеется
    – Jamshed
    19 фев 2018 в 4:33
  • если хотите могу подогнать пример под Вас?
    – Jamshed
    19 фев 2018 в 4:34
  • работает! ) Вот только не уходит при снятии флажка )
    – jujujus
    19 фев 2018 в 4:37
  • document.querySelector(".innerHere").innerHTML = that.checked ? text : "";
    – Jamshed
    19 фев 2018 в 4:39

Ваш ответ

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

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