单击功能不显示元素

Question

我需要在选中复选框时显示元素，并在取消选中时隐藏它们。

netstat -an | grep LISTEN | grep 8081

这是显示/隐藏它们的功能，但它不起作用：

for (var id = 1; id <= N; id++) {
    var $newSlider = $("<div/>", {
        id: 'slider-' + id,
        class: 'ui-slider'
    }).slider({
        range: 'min',
        min: initVal,
        max: N,
        value: initVal,
        step: 2,
        slide: function( event, ui) {
            $newResult.val( ui.value );
        }
    });
    var $newResult = $('<input/>', {
        type: 'text',
        id: 'result-' + id,
        class: 'sliderText',
        value: '4'
    });
    var $x = $("<div/>", {
        id: 'sliderContainer-' + id
    }).append($newResult).append($newSlider);
    $("#showSldr").append($x);
}

问题必定是我没注意到的......

事实上，最初是在第一次选中复选框时创建了滑块（每个）：http://jsfiddle.net/dhirajbodicherla/6vkyh4kL/10/

但我更喜欢将它们创建并显示/隐藏，这样无论您首先检查哪个复选框，它们始终都是有序的（从1到30）：http://jsfiddle.net/6vkyh4kL/13/