1

Написал такой код

$("#workDesign label").on("click", function() {
  var input = $(this).children("input");
  var tag = $(this).text();
  if (input.prop("checked")) {
    input.parent().addClass("selected");
    alert(tag);
    $("#workDesignTags").val(tag);
  } else {
    input.parent().removeClass("selected");
  }
});
var tagList;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">

  <input type="text" name="tags" id="workDesignTags">

  <label>
    <input type="checkbox" name="design" value="Value 1"><span class="textBox">Value 1</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 2"><span class="textBox">Value 2</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 3"><span class="textBox">Value 3</span>
  </label>
  <label>
    <input type="checkbox" name="design" value="Value 4"><span class="textBox">Value 4</span>
  </label>
</div>

Как сделать, что бы значение добавлялось, а не замещало собой старое? Как сделать, что бы значение удалялось из всего value, если checkbox снят? У меня в вёрстке меняет просто значения в input.

2 ответа 2

1

Можно держать все значения в массиве. Программно отрисовывать инпуты. В массиве держать состояние – индексы выбранных значений. По кажому изменению перерисовывать значение текстового поля.

var tags = [
    "Value 0",
    "Value 1",
    "Value 2",
    "Value 3",  
  ]
  ,selected = []
  ,$in = $('#workDesignTags')
;

render();
$("#workDesignLabels input").on("change", clickHandle);

function render() {
  var i, v, items=[];
  for(i=0;i<tags.length; i++) {
    v = tags[i];
    items.push( $('<label>').append( $('<input>', {
        type:"checkbox",
        name:"design",
        value: i,
      })).append( v)
    );
  };
  $('#workDesignLabels').append(items);
}

function clickHandle() {
  var i, k = $(this).val(), result = [];
  if( !!~(i = selected.indexOf(k))) {
    selected.splice( i, 1);
  } else {
    selected.push(k);
  }
  for(i=0;i<selected.length;i++) result.push( tags[ selected[i]]);
  $in.val( result.join(', '));
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="formRow labelBox col3 dropDownMobile" id="workDesign">
  <input type="text" name="tags" id="workDesignTags">
  <div id="workDesignLabels"></div>
</div>

0

Не самое лучшее решение, но работает на вашем примере

var inputText = "";

$("#workDesign label").on("click", function() {
  var input = $(this).children("input");
  var tag = $(this).text();
  if (input.prop("checked")) {
    inputText += tag;
    input.parent().addClass("selected");
    alert(tag);
    $("#workDesignTags").val(inputText);
  } else {
    inputText = inputText.replace(tag, "");
    $("#workDesignTags").val(inputText);
    input.parent().removeClass("selected");
  }
});

https://jsfiddle.net/xpnh756p/

Ваш ответ

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

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