Как удалить значение из input?

318

05 ноября 2019, 05:20

Есть такая задача: Есть модальное окно, которое открывается при клике на Input.В этом модальном юзер выбирает определенные категории. И выбранные категории должны записаться в Input, на который нажали и откуда появилось модальное окно. Если мы второй раз нажали на выбранную категорию, то она удаляется из Input'a.

По логике надо проверить строку через replace, но в Javascript не могу реализовать. Подскажите без использования jQuery
А также как удалить последнюю запятую? Если выбрано 1но значение, то запятой не должно быть. Если 2 и более, то надо и у последнего удалить

jsfiddle.net/m0hsyx9L

Answer 1

Возможно можно и проще, но вот вариант:

const target = document.getElementById('target'); 
const checkboxs = document.querySelectorAll('input[type="checkbox"]'); 
 
for (var i = 0; i < checkboxs.length; i++) { 
  checkboxs[i].addEventListener('change', function() { 
    send() 
  }, false); 
} 
 
function send() { 
  let value = ''; 
  for (var i = 0; i < checkboxs.length; i++) { 
    let el = checkboxs[i]; 
    if (el.checked) value += ', ' + el.value; 
  } 
  target.value = value.replace(/^\, +/g, ''); 
} 
 
send();

body { 
  margin: 1em; 
  padding: 0 
} 
 
input#target { 
  width: 100% 
}

<input id="target" disabled></input> 
 
<input type="checkbox" name="email" value="email" checked="true"> 
<label for="type1">Email</label> 
<input type="checkbox" name="phone" value="phone"> 
<label for="type2">Phone</label> 
<input type="checkbox" name="mail" value="mail"> 
<label for="type3">Mail</label>