如何根据复选框在输入中添加文本

How to add text in input depending on a checkbox?

本文关键字：添加 文本 输入 何根 复选框      更新时间：2023-10-18

编写此代码

$("#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>

如何增加价值，而不是取代旧的价值？如果复选框未选中，如何从总值中删除该值？我的布局只是改变了输入中的值。

try:

$("#workDesign label").on("click", function() {
  var input = $(this).children("input");
  var tag = $(this).text();
  if (input.prop("checked")) {
    input.parent().addClass("selected");
   val = $("#workDesignTags").val().trim() + tag;
    $("#workDesignTags").val(val);
  } 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>

$("#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($.trim($("#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>

您可以获得输入值，并将其与新值相加，然后将其设置为输入值

另一种选择可能是这样的

var value = "";
$("#workDesign label").on("click", function() {
  var input = $(this).children("input");
  var tag = $(this).text();
  if (input.prop("checked")) {
    input.parent().addClass("selected");
    value += $.trim(tag)
    $("#workDesignTags").val(value);
  } else {
    input.parent().removeClass("selected");
  }
});
<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>

相关文章：