Как записать все значения входных типов в span при изменении, используя javascript / jquery? - PullRequest
Новая
       20

Как записать все значения входных типов в span при изменении, используя javascript / jquery?

0 голосов
/ 26 сентября 2018

У меня есть список типов ввода, комбинация <input type="checkbox"> и <input type="text">

всякий раз, когда я выбираю флажок, он устанавливает его значение в 

<span name="products" id="products"></span>

, разделенноезапятая.

Но я не знаю, как включить значение <input type="text" />, поэтому всякий раз, когда я вводю значение, оно также добавляет его значение к 

<span name="products" id="products"></span>

Пожалуйста, помогите мне,Мой код:

Javascript 

$(function() {
  $('input[name=selectProducts]').on('change', function() {    
    $('#products').text($('input[name=selectProducts]:checked').map(function() {
      return this.value;
    }).get());
  });
});

HTML 

<input type="checkbox" name="selectProducts" id="product1" value="product1" />
<input type="checkbox" name="selectProducts" id="product2" value="product2" />
<input type="checkbox" name="selectProducts" id="product3" value="product3" />
<!-- i want to include these input type text -->
<input type="text" name="selectProducts" id="product4" value="product4" />
<input type="text" name="selectProducts" id="product5" value="product5" />
<span name="products" id="products"></span>

ВЫХОД 

product1,product2,product3,product4,product5

Здесь работает только флажок.Пожалуйста, помогите мне сделать во входном тексте.

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Попробуйте этот код 

$(() => {
    var prods = $("span#products");
    $("input[type='text'], input[type='checkbox']").change((el) => {
      if(!el.target.checked && el.target.type=="checkbox") return;
      else{
        prods.html(prods.html() + el.target.value);
      }
    });
});
0 голосов
/ 26 сентября 2018

Вы должны добавить type=text входы в селектор jquery. 

$('input[name=selectProducts]:checked, input[name=selectProducts][type=text]')

Таким образом, ваш код должен быть изменен на 

$('input[name=selectProducts]').on('change', function() {
    $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
        return this.value;
    }).get());
});


$('input[name=selectProducts]').on('change keyup', function() {
  $('#products').text($('input[name=selectProducts]:checked, input[name=selectProducts][type=text]').map(function() {
    return this.value;
  }).get());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="selectProducts" id="product1" value="product1" />
<input type="checkbox" name="selectProducts" id="product2" value="product2" />
<input type="checkbox" name="selectProducts" id="product3" value="product3" />
<input type="text" name="selectProducts" id="product4" value="product4" />
<input type="text" name="selectProducts" id="product5" value="product5" />
<span name="products" id="products"></span>
...