Javascript 按顺序显示动态复选框

我想按顺序（从1到30）显示动态复选框，但它们以相反的顺序（从30到1）显示，而且当滑块达到30时，数字1也不会显示：

for (var i = 1; i <= N; i++) {
    var $input = $('<input/>', {
      type: "checkbox",
      id: "checkbox-" + i
    });
    var $label = $('<label/>', {
      id: "label-" + i,
      for: "checkbox-" + i
    }).append(i);
    var $container = $('<div/>', {
      id: "chckContainer-" + i
    }).append($input).append($label);

    $("#showChck").append($container);
}

---

for（var i=1；i我所能看到的几处变化，以及
：gt
也添加了
：eq

$("#showChck div").show().filter(":eq("+ui.value+"), :gt(" + (ui.value) + ")").hide();

将条件从
ui.value==1
更改为
<1

if (ui.value < 1) { 
  $("#show_channels").hide();
  $("#label-1").hide();
} else {
  $("#show_channels").show();
}

 if (ui.value < 1) {
            $("#show_channels").hide();
            $("#label-1").hide();
        } else {
            $("#show_channels").show();
        }

如果（ui.value<1）{
$（“显示频道”）.hide（）；
$（“#label-1”）.hide（）；
}否则{
$（“显示频道”）.show（）；
}

以下是更新的演示

希望这有帮助。
您需要将
N-ui.value
更改为
ui.value-1
。
不需要添加任何额外的过滤器

$("#showChck div").show().filter(":lt(" + (ui.value - 1) + ")").hide();

并将
ui.value==1
更改为
ui.value<1

if (ui.value < 1) { 
  $("#show_channels").hide();
  $("#label-1").hide();
} else {
  $("#show_channels").show();
}

 if (ui.value < 1) {
            $("#show_channels").hide();
            $("#label-1").hide();
        } else {
            $("#show_channels").show();
        }

将
：lt
替换为
：gt

那么这些过滤器是按相反的顺序显示的？我真的需要了解它们和jquery。谢谢！：）这不是OP想要的方式。当滚动条在30时，所有30个框都应可见，在1时，只有第一个框应可见visible@DhirajBodicherla好了，现在清楚了。我已经编辑了我的答案。