Created
February 9, 2013 02:39
-
-
Save hibiki/4743590 to your computer and use it in GitHub Desktop.
チェックボックスの、全てにチェックをトグルしたり
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
label { | |
display: block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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