Skip to content

Instantly share code, notes, and snippets.

@hibiki
Created February 9, 2013 02:39
Show Gist options
  • Save hibiki/4743590 to your computer and use it in GitHub Desktop.
Save hibiki/4743590 to your computer and use it in GitHub Desktop.
チェックボックスの、全てにチェックをトグルしたり
label {
display: block;
}
<div class="checkToggle">
<p class="switchSet">
<label><input type="checkbox" class="switchToggle">全てにチェック - トグル</label>
<label><input type="checkbox" class="switchTrue">全てにチェック</label>
<label><input type="checkbox" class="switchFalse">全てのチェックを外す</label>
</p>
<p class="checkboxSet">
<label><input type="checkbox">aaa</label>
<label><input type="checkbox">bbb</label>
<label><input type="checkbox">ccc</label>
</p>
<!-- / .checkToggle --></div>
(function($) {
// 読み込んだら開始
$(function() {
// チェックボックスの一括操作
$(".checkToggle").each(function() {
// 変数にセット
var switchSet = $(this).find(".switchSet");
var checkboxSet = $(this).find(".checkboxSet");
var targetCheckbox = checkboxSet.find("input:checkbox");
var targetCheckboxLength = targetCheckbox.length;
var switchToggle = switchSet.find(".switchToggle");
var switchTrue = switchSet.find(".switchTrue");
var switchFalse = switchSet.find(".switchFalse");
// 自分以外の .switch 系チェックボックスのチェックを外す
var switchOff = function(opt) {
var findTxt = "input:not(" + opt + ")";
switchSet.find(findTxt).attr("checked", false);
};
// スイッチ -> 全てにチェック - トグル
switchToggle.click(function() {
// .switchToggle にチェックがついていなかったら、ターゲットチェックボックスからチェックを外す
if (switchToggle.filter(":checked").length === 0) {
targetCheckbox.attr("checked", false);
// .switchToggle にチェックがついていたら、ターゲットチェックボックスにチェックをつける
} else {
targetCheckbox.attr("checked", true);
}
switchOff(".switchToggle");
});
// スイッチ -> 全てにチェック
switchTrue.click(function() {
var checkedLength = checkboxSet.find(":checked").length;
// switchTrue にチェックがついていたら、ターゲットチェックボックスにチェックをつける
if (switchTrue.filter(":checked").length === 1) {
targetCheckbox.attr("checked", true);
switchOff(".switchTrue");
// switchTrue にチェックがついていない&ターゲットチェックボックスが全てチェックされていたら switchFalse に再度チェックをつける
} else if (targetCheckboxLength === checkedLength) {
$(this).attr("checked", true);
}
});
// スイッチ -> 全てのチェックを外す
switchFalse.click(function() {
// チェックされていないターゲットチェックボックスの数
var noCheckedLength = checkboxSet.find(":checkbox:not(:checked)").length;
// switchFalse にチェックがついていたら、
if (switchFalse.filter(":checked").length === 1) {
targetCheckbox.attr("checked", false);
switchOff(".switchFalse");
// switchFalse にチェックがついていない&ターゲットチェックボックスが全てチェックされていなかったら switchFalse に再度チェックをつける
} else if (targetCheckboxLength === noCheckedLength) {
$(this).attr("checked", true);
}
});
// 個別にチェックボックスを操作した時
targetCheckbox.click(function() {
// チェックされていないターゲットチェックボックスの数
var noCheckedLength = checkboxSet.find(":checkbox:not(:checked)").length;
if (noCheckedLength > 0) {
switchToggle.attr("checked", false);
switchTrue.attr("checked", false);
switchFalse.attr("checked", false);
}
});
});
});
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment