Reputation: 13206
I am trying to manipulate a series of check-boxes on button click but I can't seem to figure out how to do it. I need to achieve the following actions:
Select all checkboxes
Select checkboxes 1-12
Select odd checkboxes
Select even checkboxes
Clear checkboxes
Control slider range to select weeks
All while updating the checkbox.
Here is my jsFiddle: http://jsfiddle.net/dYsg7/
Initially I was using the following code to satisfy points 1-5 but as I've changed the layout of my checkboxes I can't figure out how to implement it into my new design:
$('#week_none').click(function () {
$('#week_boxesForm li').each(function (index) {
$(this).find('input:checkbox').prop("checked", false);
});
});
$('#week_all').click(function () {
$('#week_boxesForm li').each(function (index) {
$(this).find('input:checkbox').prop("checked", true);
});
});
$('#week_term').click(function () {
$('#week_boxesForm li').each(function (index) {
if (index < 12) $(this).find('input:checkbox').prop("checked", true);
else $(this).find('input:checkbox').prop("checked", false);
});
});
$('#week_odd').click(function () {
$('#week_boxesForm li').each(function (index) {
if (index % 2 === 0) $(this).find('input:checkbox').prop("checked", true);
else $(this).find('input:checkbox').prop("checked", false);
});
});
$('#week_even').click(function () {
$('#week_boxesForm li').each(function (index) {
if (index % 2 !== 0) $(this).find('input:checkbox').prop("checked", true);
else $(this).find('input:checkbox').prop("checked", false);
});
});
Upvotes: 0
Views: 217
Reputation: 15794
Here is how to do points 1 - 6:
Javascript
$(".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));
$('.week_none').on('click', function () {
$('input:checkbox[name="weeks_1"]').prop("checked", false);
});
$('.week_all').on('click', function () {
$('input:checkbox[name="weeks_1"]').prop("checked", true);
});
$('.week_term').on('click', function () {
$('input:checkbox[name="weeks_1"]').prop("checked", false);
$('input:checkbox[name="weeks_1"]').slice(0, 12).prop("checked", true);
});
$('.week_odd').on('click', function () {
$('input:checkbox[name="weeks_1"]').prop("checked", false);
$('input:checkbox[name="weeks_1"]:even').prop("checked", true);
});
$('.week_even').on('click', function () {
$('input:checkbox[name="weeks_1"]').prop("checked", false);
$('input:checkbox[name="weeks_1"]:odd').prop("checked", true);
});
Upvotes: 2