CODEWITHSUNDEEP
jquery
methuselah
methuselah

Reputation: 13216

Three instances of customised jQuery slider not working

I have three instances of jQuery slider on my page but only one seems to be working properly. For instance pressing the 1-12 button only works for the first box and the slider selection option only works for one option. How can I resolve this?

A slider should change checkboxes only within its box (same applies to when the user presses the buttons).

Here is my code so far and jsfiddle:

// slider  

    $(".slider_weekRange").slider({
        range: true,
        min: 1,
        max: 15,
        step: 1,
        values: [1, 12],
        slide: function (event, ui) {
            $(".search_weekRange").val(ui.values[0] + "-" + ui.values[1]);
        }
    });
    $(".search_weekRange").val($(".slider_weekRange").slider("values", 0) +
        "-" + $(".slider_weekRange").slider("values", 1));

$(".slider_weekRange2").slider({
    range: true,
    min: 1,
    max: 15,
    step: 1,
    values: [1, 12],
    slide: function (event, ui) {
        $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]);
        $('input:checkbox[name="weeks_1"]').prop("checked", false);
        $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true);
    }
});
$(".search_weekRange2").val($(".slider_weekRange2").slider("values", 0) +
    "-" + $(".slider_weekRange2").slider("values", 1));

// no weeks

$('.week_none').click(function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $(".search_weekRange2").val('');
});

// all week

$('.week_all').click(function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", true);
    $(".search_weekRange2").val('1-15');
});

// weeks 1-12

$('.week_term').click(function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true);
    $(".search_weekRange2").val('1-12');
});

// odd weeks

$('.week_odd').click(function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]:even').prop("checked", true);
    $(".search_weekRange2").val('1,3,5,7,9,11,13,15');
});

// even weeks

$('.week_even').click(function () {
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]:odd').prop("checked", true);
    $(".search_weekRange2").val('2,4,6,8,10,12,14');
});

// checkbox

$('input:checkbox[name="weeks_1"]').click(function () {
    var s = [];
    $('input:checkbox[name="weeks_1"]').each(function () {
        if (this.checked) {
            s.push($(this).next().text());
        }
    });
    $(".search_weekRange2").val(s.join(','));
});

Upvotes: 0

Views: 85

Answers (1)

Vladimir Prudnikov
Vladimir Prudnikov

Reputation: 7242

The problem is that you search for checkboxes globally and then by using .slice() you select only a subset of checkboxes within the range from 0 to 15, which obviously match only checkboxes from the first box.

Instead of 

slide: function (event, ui) {
    $(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]);
    $('input:checkbox[name="weeks_1"]').prop("checked", false);
    $('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true);
}

use this 

slide: function (event, ui) {
    $(this).parent().find(".search_weekRange2").val(ui.values[0] + "-" + ui.values[1]);
    $(this).parent().find('input:checkbox[name="weeks_1"]').prop("checked", false);
    $(this).parent().find('input:checkbox[name="weeks_1"]').slice(ui.values[0] - 1, ui.values[1]).prop("checked", true);
}

Here is jsFiddle

Upvotes: 1

Related Questions