Question

的“全部切换”功能的行为

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

现在我成功地部分重现了这种行为这是我的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);
    }
});

P.S。我可以使用jquery或下划线

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

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

Answer 1

而不是

weekdays.prop("checked", true);

试试这个

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

<强> DEMO

Answer 2

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

修正了DEMO： 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>

Answer 3

或者说，每个人都有自己的答案，但我认为这很简短而且很好：

编辑：或使用Tats_innit的答案组合简单的事件 - http://jsfiddle.net/D2RLR/2534/

$('.toggle input').click(function () {
    $(this).parents('div.control-group').find('input').attr("checked", this.checked);
});

Answer 4

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

让JQ为您做全部工作：this.checked进行布尔检查。

希望它适合casue :)

<强>码

新

$('.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); } });

Answer 5

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

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

}）;

Answer 6

另一种方法不依赖于将“Toggle All”复选框包含在与要切换的容器相同的容器中。它更灵活，只有更多的工作：

$.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/

看到这个问题。

Answer 7

使用工作日复选框中的.change事件来检测何时检查所有/没有这些事件，然后设置切换复选框的选中状态

jsfiddle example（fullscreen）

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

切换输入复选框

7 个答案: