0

我正在尝试重现http://jqueryui.com/download/的“Toggle All”功能的行为

当我选择“Toggle All”复选框时，我想检查同一个 div 容器中的所有输入框。相反，当我取消选择“全部切换”复选框时。

现在我成功地部分地重现了这种行为。
这是我的http://jsfiddle.net/D2RLR/2518/，但我想实现一些更聪明的东西。
有什么提示吗？ 

$('.toggle input').click(function () {
    var weekdays;
    for (var i = 0 ; i < 7; i++) {
        weekdays = $('#contest_data_updatePeriodicity_days_' + i);
        weekdays.prop("checked", this.checked);
    }
});

PS 我可以使用 jquery 或下划线

1）我想使用contest_data_updatePeriodicity_days_选择器
2）当我选择 div 容器的所有工作日时，如果不是，则应选中“Toggle All”复选框。相反，当我取消选择所有字段时。

http://jsfiddle.net/D2RLR/2518/

4

7 回答 7

1

代替

weekdays.prop("checked", true);

尝试这个

weekdays.prop("checked", this.checked);

演示

于 2012-10-10T20:41:53.667 回答
1

尝试使用.closest获取父 div，然后使用this.checked切换状态。

固定演示：http: //jsfiddle.net/D2RLR/2530/

$(this)
  .closest('.control-group')
  .find(':checkbox')
  .prop("checked", this.checked);

你也错过了<label class="toggle对照Toggle All Hours组。修复下面的html， 

<label class="toggle">
   <input type="checkbox" class="ui-widget-content"> Toggle All Hours
</label>
于 2012-10-10T20:42:14.750 回答
1

Or this, everyone has their own answer, but I think this is short and sweet:

EDIT: or event simple using a combination of Tats_innit's answer - http://jsfiddle.net/D2RLR/2534/

$('.toggle input').click(function () {
    $(this).parents('div.control-group').find('input').attr("checked", this.checked);
});
于 2012-10-10T20:45:04.263 回答
0

试试这个请演示*更新* http://jsfiddle.net/VqLfz/ 或 http://jsfiddle.net/UPWt4/

让 JQ 为您完成所有工作：this.checked用于布尔检查。

希望它适合这种情况:)

代码

新的

$('.toggle input').click(function () {

    var foo = this.checked;
    $(this).parent().parent().find(':input').each(function(){ 
        $(this).prop("checked", foo);
    });
});

​

老的

$('.toggle input').click(function () {
    var weekdays;
    for (var i = 0 ; i < 7; i++) {
        weekdays = $('#contest_data_updatePeriodicity_days_' + i);
        weekdays.prop("checked", this.checked);
    }
});

​
于 2012-10-10T20:41:18.533 回答
0

修改jsfiddle。：您错过了在切换小时复选框之前添加。

$('.toggle input').click(function () {
 $(this).parents('div:first').find("input:checkbox").not(this).prop("checked",              $(this).prop("checked"));

});

于 2012-10-10T20:49:03.997 回答
0

使用.change工作日复选框上的事件来检测它们何时全部/未选中，然后设置切换复选框的选中状态

jsfiddle 示例（全屏）

var $checkBoxToggle = $('.toggle [type=checkbox]'),
    $checkBoxDays = $('#contest_data_updatePeriodicity_days [type=checkbox]'),
    checkBoxDaysCount = $checkBoxDays.length;

$checkBoxToggle.change(function() {
    $checkBoxDays.prop('checked', this.checked);
});

$checkBoxDays.change(function() {
    var daysChecked = $checkBoxDays.filter(':checked').length;
    switch(daysChecked)
    {
        case 0:
            $checkBoxToggle.prop('checked', false);
            break;
        case checkBoxDaysCount:
            $checkBoxToggle.prop('checked', true);
            break;
        default:
            break;
    }
});​
于 2012-10-10T21:23:35.960 回答
0

另一种方法不依赖于将“全部切换”复选框包含在与要切换的容器相同的容器中。它更灵活，而且工作量稍微多一点：

$.fn.toggleAll = function(selector) {
    return this.each(function() {
        $(this).click(function() {
            $(selector).filter(':checkbox').prop('checked', this.checked);
        });
    });
};
$('#all-days').toggleAll('[id^=contest_data_updatePeriodicity_days_]');
$('#all-hours').toggleAll('[id^=contest_data_updatePeriodicity_hours_]');

（这会跳过一些您可能应该做的错误检查。）您可以在http://jsfiddle.net/CrossEye/W7c9L/上看到这一点

于 2012-10-10T21:13:09.000 回答