动态创建唯一的复选框

Create unique checkboxes dynamically

本文关键字：复选框 唯一 创建 动态      更新时间：2023-09-26

我想从"输入类型编号"创建复选框。这就是我所走的路：

Fiddle：我当前的代码

html

 <div id="positions">
    <input type="number" class="txt" value="1" style="width: 30px"/>
    <button type="button" class="btnPos">Add pos</button>
 </div>

脚本

$(document).ready(function () {
   $(".btnPos").on('click', function () {
       $('#positions').append('<input type="checkbox" name="myCheckbox" />' 
           + "Pos " + $(".txt").val());
   });
});

现在我创建这样的复选框：[]pos 1等。但我想同时创建这样的7。假设我在输入中选择数字"3"。我希望它创建3个这样的框：[]pos 1，[]pos 2，[]pos3。

我认为这正是您想要的（添加时遵循正确的pos索引）：

$(document).ready(function () {
    $(".btnPos").on('click', function () {
        for(var i=1; i<=$(".txt").val(); i++)
        {
            var numItems = 0;
            if ( $('input[type="checkbox"]') )    
            {
                numItems = $('input[type="checkbox"]').length + 1;
            }
            $('#positions').append('<input type="checkbox" name="myCheckbox" />' + "Pos " + numItems);
        }
    });
});

参见http://jsfiddle.net/7mBRu/32/

$(document).ready(function () {
    $(".btnPos").on('click', function () {
    for(var i=1; i<=$(".txt").val(); i++)
    {
        $('#positions').append('<input type="checkbox" name="myCheckbox" />' + "Pos " + i);
    }
    });
});
below is the working fiddle

http://jsfiddle.net/7mBRu/29/

相关文章：