Javascript 根据输入类型数字值创建复选框字段

我有这个剧本 计算所选日期之间的天数

更新

这个代码正确吗？如何在页面中显示循环

$( document ).ready(function() {
    $("#endDate").change(function () {
        var date1 = new Date($("#startDate").val());
        var date2 = new Date($("#endDate").val());
        console.log(date2);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
      var dayes =  $('#dayes').val(diffDays);

        for( i=0;i<dayes; ++i ){
            var checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name = "name";
            checkbox.value = "value";
            checkbox.id = "id";

            var label = document.createElement('label')
            label.htmlFor = "id";
            label.appendChild(document.createTextNode('text for label after checkbox'));

            container.appendChild(checkbox);
            container.appendChild(label);
        }


    });
});

  <div class="col-lg-2">
                    <lable for="prodayes " style="font-size: 16px ; text-align: center" class="form-control rounded ">Event Dates </lable>
                </div>
                <div class="col-lg-2">
                    <input  style="font-size: 16px ; text-align: center" class="form-control rounded " data-required="true" type="date"  name="from_date" id="startDate" >
                </div>
                <div class="col-lg-2">
                    <lable for="prodayes " style="font-size: 16px ; text-align: center" class="form-control rounded ">TO </lable>
                </div>
                <div class="col-lg-2">
                    <input  style="font-size: 16px ; text-align: center" class="form-control rounded " data-required="true" type="date"  name="to_date" id="endDate" >
                </div>
                <div class="col-lg-2">
                    <lable for="prodayes " style="font-size: 16px ; text-align: center" class="form-control rounded "> Total Days </lable>
                </div>
                <div class="col-lg-2">
                    <input type="number" disabled id="dayes" value="" style="font-size: 16px ; text-align: center" class="form-control rounded ">
                </div>

$（文档）.ready（函数（）{
$（“#endDate”）。更改（函数（）{
var date1=新日期（$（“#startDate”）.val（）；
var date2=新日期（$（“#endDate”）.val（）；
控制台日志（日期2）；
var timeDiff=Math.abs（date2.getTime（）-date1.getTime（））；
var diffDays=数学单元（timeDiff/（1000*3600*24））；
var dayes=$（'#dayes'）.val（diffDays）；
对于（i=0；i做一个循环并创建如下

var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";

var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode('text for label after checkbox'));

container.appendChild(checkbox);
container.appendChild(label);

只需在函数末尾添加以下代码：

for (var i = 0; i < diffDays; i++) {
    let elem = $('<div class="col-lg-2">');
    elem.append($('<input class="form-control rounded" type="checkbox">'));
    $("#dayes").insertBefore(elem);
}

你说创建复选框字段是什么意思？没有一个示例，你问的问题有点不清楚。你能展示一个示例吗？我希望我有一个。以免说脚本结果是3。我想在表单中创建3个复选框字段。这有意义吗？所以你想创建
x
复选框并将它们添加到表单中，其中
 x
是
diffDays
？是的，这是正确的。与“php”有什么关系？您能帮助我使用循环代码以及如何显示它吗？存储$（'#dayes'）.val（diffDays）；在一个变量中并循环它。代码不起作用，，，，我试图控制台diffDays，但我没有得到使用此代码的结果。此代码将自动为您插入所有内容-而且，
diffDays
不存在于函数外部，因为
var
的函数范围。我在脚本中对diffDays进行范围分析，并获得结果但页面上没有显示任何内容…@JackBashford您的for循环不正确。请检查，我认为这是打字错误。@CodeManiac和drorshalit我现在已经修复了它。
$(document).ready(function() {
    $("#endDate").change(function() {
        var date1 = new Date($("#startDate").val());
        var date2 = new Date($("#endDate").val());
        console.log(date2);
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        $("#dayes").val(diffDays);
            for (var i = 0; i < diffDays; i++) {
                let elem = $('<div class="col-lg-2">');
                elem.append($('<input class="form-control rounded" type="checkbox">'));
                $("#dayes").insertBefore(elem);
            }
    });
});