Question

如何通过Js实现点击一组复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？

比如有5个复选框，如何通过js实现点击复选框，动态添加1个input输入框，输入框中自动填充所选复选框的内容呢？

Answer 1

以jquery为例

<input class="ck" data="1">
<input class="ck" data="2">
<input class="ck" data="3">

var html;
$( ".ck" ).click( function() {
    if( this.checked ) {
        html = '<input type="text" value="' + $( this ).attr( "data" ) + '">';
        $( "body" ).append( html );
    }
} );

追问

这样就会创建了几个input标签了！怎么才能只创建一个input标签，并在里面填充所选复选框的内容呢

追答

<input class="ck" data="1">
<input class="ck" data="2">
<input class="ck" data="3">
 
var html = $( '<input type="text">' );
$( ".ck" ).click( function() {
    if( this.checked ) {
        html.val( $( this ).attr( "data" ) );
        $( "body" ).append( html );
    }
} );