切換輸入復選框

Question

我正在嘗試重現http://jqueryui.com/download/的“全部切換”功能的行為

當我選中“全部切換”復選框時，我想選中位於同一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容器的所有工作日時，如果未選中“全部切換”復選框。 相反，當我取消選擇所有字段時。

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

Answer 1

代替

weekdays.prop("checked", true);

嘗試這個

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

演示

Answer 2

嘗試使用.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控制組的<label class="toggle 。修復如下所示的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 ： this.checked為bool檢查。

希望它適合情況:)

碼

新

$('.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示例 （ 全屏 ）

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