javascript - 使用复选框将输入字段中的实时文本添加到另一个 div

Question

我有一个输入框，下面有一个添加按钮。还有另一个名为 .new-option-content 的 Div 类 我想做的是，如果有人在输入字段中键入内容并单击 +ADD 按钮，输入字段的此文本将在 .new-option-content div 中附加一个复选框。

这是 Fiddle

我试过这个，但我想这个过程我得不到结果。

$( ".checklist-new-item-text" )
  .keyup(function() {
    var value = $( this ).val();
    $( ".new-option-content" ).text( value );
  })
  .keyup();

我不擅长高级 jquery。我确实试图找到类似的东西但失败了。我不确定这是否可以用 jquery 完成。

如有任何帮助或建议，我们将不胜感激。

Answer 1

$("#add").click(function(){

   var newLabel = $("#optionInput").val();

   if (!newLabel) return; //avoid adding empty checkboxes
   var newOption = '<div class="checkbox"><label><input type="checkbox">' + newLabel +'</label></div>';   

   $(".new-option-content").append(newOption);

   $("#optionInput").val(''); //clearing value

})

fiddle :http://jsfiddle.net/has9L9Lh/8/

如果你想在页面的多个地方使用它，你可以试试这个修改后的版本:

$(".new-option-add").click(function(){

   var labelInput = $(this).parent().parent().find(".checklist-new-item-text")
   var newLabel = labelInput.val()

   if (!newLabel) return; //avoid adding empty checkboxes

   var newOption = '<div class="checkbox"><label><input type="checkbox">' + newLabel +'</label></div>';   

   // where to append? 
   var listToAppend = $(this).attr("data")

    $("." + listToAppend).append(newOption); 

   labelInput.val(''); //clearing value

})

我们在按钮上使用数据属性值，来分配需要更新的列表的类名。

fiddle :http://jsfiddle.net/has9L9Lh/18/