我在我的页面上有三个jQuery滑块实例,但只有一个似乎正常工作。例如,按1-12按钮仅适用于第一个框,而滑块选择选项仅适用于一个选项。我该如何解决这个问题?三个自定义jQuery滑块不工作的实例
滑块只能在其框中改变复选框(同样适用于用户按下按钮时)。
这是到目前为止我的代码和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(','));
});
只应在包装盒中滑块改变复选框? – 2013-03-20 13:22:15
是的滑块只应该改变框内的盒子 – methuselah 2013-03-20 13:25:35
似乎你所有的复选框都有相同的名称? – tymeJV 2013-03-20 13:27:17