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>');

使用Checkbox将输入字段中的实时文本添加到另一个div

4 个答案: