自定义jQuery滑块的三个实例不工作

我的页面上有三个jqueryslider实例，但似乎只有一个运行正常。例如，按下1-12按钮仅适用于第一个框，滑块选择选项仅适用于一个选项。我如何解决这个问题

滑块应仅在其框内更改复选框（用户按下按钮时也应如此）

这是我迄今为止的代码和：

// 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(','));
});

---

问题是，您需要全局搜索复选框，然后使用

.slice（）

只选择0到15范围内的复选框子集，这显然只匹配第一个框中的复选框

而不是

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);
}

用这个

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);
}

---

以下是

滑块是否应仅更改其框内的复选框？是的，滑块应仅更改其框内的复选框似乎所有复选框都具有相同的名称？谢谢Vladimir。但这并没有解决第二个bug。如果我按下方框2上的1-12按钮，它不起作用，但在方框1上起作用。其次，如果我按下“奇数”按钮，然后继续取消选中复选框，那么它会在复选框中添加值，而不是替换它。希望我清楚。只需测试JSFIDLE，就可以看到：-）完全相同的情况。使用

$（this）.parent（）.find（…）

而不是

$（…）

将选择限制在当前框的范围内。我已经更新了JSFIDLE。我已经按照建议进行了更改，但是现在当我取消选中/选中复选框时，文本框中的值没有改变，并且文本框没有读取默认选择：-（哇，谢谢！但是我如何让文本框识别框1、2和3中默认选择了1-12，而不是在初始化时将其清除