使用复选框将输入字段中的实时文本添加到另一个 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

})

小提琴：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

})

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

小提琴：http://jsfiddle.net/has9L9Lh/18/

Answer 2

你可以这样做：

$(function() {
    $('.new-option-add').on('click',function() {
        var noc = $('.new-option-content'),
            val = $('.checklist-new-item-text');
        !val.val() || noc.append( 
            $('<div/>',{class:'checkbox'}).html(
                $('<label/>').html( $('<input/>', {type:'checkbox'}) )
                .append( ' ' )
                .append( val.val() )
            )
        );
        val.val('');
    });
});

DEMO

这应该适用于多个部分：

$(function() {
    $('.new-option-add').on('click',function() {
        var section = $(this).closest('section'),
            noc = $('.new-option-content', section),
            val = $('.checklist-new-item-text', section);
        !val.val() || noc.append( 
            $('<div/>',{class:'checkbox'}).html(
                $('<label/>').html( $('<input/>', {type:'checkbox'}) )
                .append( ' ' )
                .append( val.val() )
            )
        );
        val.val('');
    });
});

DEMO

Answer 3

很多人已经回答了，还有一个选择是使用.clone()，否则你可能会陷入维护噩梦，所以像

$(".new-option-add").click(function() {
    var checkbox = $(".checkbox:first").clone(), value;
    value = $(".checklist-new-item-text").val();
    checkbox.html(checkbox.html().replace('Sample 1', value));
    checkbox.appendTo($(".new-option-content"));
})

http://jsfiddle.net/has9L9Lh/19/

Answer 4

您可以通过添加此代码来做到这一点

点击事件

 $('#yourDiv').append(' <label><input id="chkbox" type="checkbox"> "+$('#yourText').val() +" </label>');