Как сделать так чтобы данные с checkbox передавались в Input через запятую?

Question

[Евгений]

чтобы при нажатии checkbox не стирался value в Input
jsfiddle.net/muksdfeb/2

Comments

[Push Pull]

т.е. значения добавлялись без удаления? т.е. повторное нажатие дублирует текст значения чекбокса?

[Денис Инешин]

Что-то вопрос не очень понятен.

[Евгений]

Push Pull: нет, у input есть value=ноль при нажатии чекбокса value с чекбокса добавляются к Input Value через запятую, или ели в строке введены данные при нажатии от добавляет через запятую checkbox value

[Евгений]

сейчас код jsfiddle.net/muksdfeb/2 удаляет INPUT VALUE при нажатии Checkbox а нужно чтобы дописывал через запятую, должен быть результат (ноль, два два ) если выбран checkbox два два, и например я начал вводить текст в input (привет как дела) потом нажимаю (три три три) должно получиться (привет как дела, три три три)

Answer 1

[Алексей Волегов]

jQuery(function($) {
  var $text = $('#text-input'),
      $box = $('.my-checkbox'),
      $defval = $text.val();
  
  $box.on('click change', function() {
    var values = [];
    
    $box.filter(':checked').each(function() {
      values.push(this.value);
    });
    
      $text.val($defval + ((values.length) ? ',' : '') + values.join(','));
  });
    $text.on('change', function() {
        $defval = $(this).val();
    });
});

Вот только если после выбора checkbox вы начнете вводить текст — то он станет текстом основным. Если нужна какая-то более извращенная логика, то описывайте более детально сразу =)

Comments

[Евгений]

Спасибо! только надо еще чтобы например я начал вводить текст в input (привет как дела) потом нажимаю (три три три) должно получиться (привет как дела, три три три)

Answer 2

[Евгений]

jQuery(function($) {
  var $text = $('#text-input'),
      $box = $('.my-checkbox');
  
    $box.on('click', function() {
    var values = $text.val().split(",") || [];
    
    $box.each(function() {
        
        if($(this).prop("checked")){
            if(values.join("").indexOf(this.value) < 0){  
              values.push(this.value);
            }
        } else {
            var index = values.indexOf(this.value);
            if(index >=0){
                values.splice(index, 1);
            }
        }
});
    $text.val(values.join(','));
  });
});