切換輸入複選框

我試圖重現的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); 
    } 
});

P.S. 我可以使用jQuery或下劃線

1）我想當我選擇一個div容器中的「切換全部」複選框應檢查所有平日如果不使用contest_data_updatePeriodicity_days_選擇
2）。相反，當我取消選擇所有領域。

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

來源

2012-10-10 Lorraine Bernard

試試這個請演示 * 更新 * 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); 
    } 
});

來源

2012-10-10 20:41:18

+1感謝您的建議。你部分回覆我的問題，因爲我也在問一個避免寫入id選擇器的方法。我更新了我的問題。謝謝。 –

@LorraineBernard http://jsfiddle.net/VqLfz/'：''更新我的答案以及bruv！ '：）' –

而不是

weekdays.prop("checked", true);

試試這個

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

DEMO

來源

2012-10-10 20:41:53

嘗試使用.closest獲取父格，然後使用this.checked切換狀態。

固定DEMO：http://jsfiddle.net/D2RLR/2530/

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

另外你的Toggle All Hours對照組無緣<label class="toggle。修復HTML像下面，

<label class="toggle"> 
    <input type="checkbox" class="ui-widget-content"> Toggle All Hours 
</label>

來源

2012-10-10 20:42:14

呦，+1 bruv！確實！ –

@Tats_innit謝謝:) –

http://jsfiddle.net/VqLfz/'：）'heh –

還是這個，每個人都有自己的答案，但我認爲這是短暫的甜蜜：

編輯：或事件的簡單使用Tats_innit的回答的組合 - http://jsfiddle.net/D2RLR/2534/

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

來源

2012-10-10 20:45:04 kalpaitch

修改jsfiddle。：在切換時間複選框之前錯過了添加。

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

}）;

來源

2012-10-10 20:49:03 Anoop

另一種方法不依賴於將「切換全部」複選框包含在與要切換的容器相同的容器中。它更靈活，只是稍微更多的工作：

$.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-10 21:13:09

看到這個使用.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; 
    } 
});

的選中狀態

來源

2012-10-10 21:23:35 MikeM

切換輸入複選框

回答

相關問題