复选框jQuery操作
复选框jQuery操作
提问于 2013-03-17 23:33:17
我试图操作一系列的复选框按钮点击，但我似乎不知道如何做。我需要做到以下几点：
- 选择所有复选框
- 选中复选框1-12
- 选择奇数复选框
- 选择偶数复选框
- 清除复选框
- 控制滑块范围来选择周
同时更新复选框。
这是我的jsFiddle：http://jsfiddle.net/dYsg7/
最初，我使用以下代码来满足点1-5的要求，但由于更改了复选框的布局，所以无法将其实现到我的新设计中：
$('#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);
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-17 23:45:50
以下是如何处理第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);
});演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15467595
复制相关文章
相似问题
腾讯云开发者
