CODEWITHSUNDEEP
javascriptjquery
Chazy Chaz
Chazy Chaz

Reputation: 1851

show and hide elements based on slider value

I'm trying to make an slider to show and hide elements when moving the slider bar (ui.value).

First I create the elements (checkboxes) using jquery:

var start = 1;

$(new Array(30)).each(function () {

    $('#showChck').prepend(
        $('<input/>', {type:"checkbox", name:"checkbox-" + start, id:"checkbox-" + start, class:"custom", style:"display:none;", title: "Cambiar los canales que tendrá la linea: " + start}),
        $('<label/>', {for: 'checkbox-' + start, id:"label-" + start, style:"display:none;"}).text(start)
    );

    start++;
});

Now I have 30 checkboxes and they are hidden. I'd like to show and hide them based on the slider value:

$("#slider").slider({
    min: 1,
    max: 30,
    value: 1,

    slide: function( event, ui ) {
        $( "#result" ).html( ui.value );

        var startx = 1;

        $(new Array(ui.value)).each(function () {
            // Get elements ID
            var checkbox = $("#checkbox-" + startx);
            var label = $("#label-" + startx);
            //var slider = $("#slider-" + startx);

            if (1 == 1) {
                if ($(checkbox).is(":checked")) {
                    //$(checkbox).attr("checked", false);
                    //slider.show();
                }
                checkbox.show();
                label.show();
            }
            else {
                if ($(checkbox).is(":checked")) {
                    //$(checkbox).attr("checked", false);
                    //slider.hide();
                }
                checkbox.hide();
                label.hide();
            }

            startx++;
        });
    }
});

Upvotes: 1

Views: 1244

Answers (1)

Roamer-1888
Roamer-1888

Reputation: 19288

You will find it simpler :

  • to nest the <input> elements inside the <label> elements. That way, you only need to show/hide the labels and their respective inputs will automatically show/hide in sympathy.
  • to select the relevant labels to be shown/hidden by filtering a jQuery collection rather than looping explicitly. As the jQuery site says, "write less, do more".

The javascript will be something like this :

$(document).ready(function() {
    var N = 30,
        initVal = 5;

    for (var i = 1; i <= N; i++) {
        $('<label/>', {
            id: "label-" + i
        }).append($('<input/>', {
            type: "checkbox",
            name: "checkbox-" + i,
            class: "custom",
            title: "Cambiar los canales que tendrá la linea: " + i
        })).append(i).prependTo("#showChck");
    }

    $("#slider").slider({
        min: 0,
        max: N,
        value: initVal,
        slide: function(event, ui) {
            $("#result").html(ui.value);
            $("#showChck label").show().filter(":lt(" + (N-ui.value) + ")").hide();
        }
    }).slider('option', 'slide')(null, { value: initVal });
});

The last line is jQuery UI's cumbersome syntax for triggering the 'slide' event for the initial value. If you don't need this feature, then delete it or just set initVal to 0.

DEMO

Upvotes: 1

Related Questions