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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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