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

Posted 2023-05-08

【中文标题】使用复选框将输入字段中的实时文本添加到另一个 div

【英文标题】：Add live text from input field to another div with Checkbox

【发布时间】：2015-01-08 04:48:54

【问题描述】：

我有一个输入字段，下面有添加按钮。还有另一个名为 .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 完成。

任何帮助或建议将不胜感激。

【问题讨论】：

不太清楚你想做什么？

另一个版本jsfiddle.net/has9L9Lh/7

jsfiddle.net/has9L9Lh/6 你可以在这里看到我想做的事情。

【参考方案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/

【讨论】：

/* 在 */ $("#optionInput").val(''); 之后清除输入值；

这里有一个问题。如果我在页面上的多个地方都有这个，我该如何使用它？因为您使用 ID 来添加按钮和输入字段。有什么办法可以在一个页面中多次使用？

【参考方案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

【讨论】：

如果我在我的页面上的多个地方都有这个，我该如何使用它？如果我重复相同的内容并从任何输入添加它附加所有这些，我会看到您的代码帮助。例如：jsfiddle.net/has9L9Lh/13 这是否可以使它在一个页面中同时适用于几个相同的页面？谢谢

是的，通过使用 section 元素创建上下文并调整代码，如下所示：jsfiddle.net/fiddleyetu/has9L9Lh/14

【参考方案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/

【参考方案4】：

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

点击事件

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

【讨论】：

如果您不向“添加”按钮添加点击事件侦听器，这将永远无法工作。

当然可以在点击事件中尝试一下，最好将 (id) 用于创建的元素