checkboxのclass名の変化で総数を集計したい。

Question

classネームの変化で総数を変更したいと思ています。

条件

• リストclassネーム

class="tree-checkbox tree-checkbox1"

※ここの後ろ、「tree-checkbox1」でcheckboxが制御さえれているみたいです。
↓
tree-checkbox0 = folse
tree-checkbox1 =　true

boorstrapか何か使っているとは思いますがはっきりはわかりません。

やりたいこと
javascriptかjqueryでclass名の変化でリアルタイムで総数を出したいと思っています。

checkboxがオンになると
tree-checkbox0⇒tree-checkbox1

総数だけ表示

$(function(){
    var cnt = $(".tree-checkbox1").length;
    alert(cnt);
});

Comments

[kei344]

プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）

[H40831]

ほんとに余計なお世話だったら申し訳ないのですが、
チェックボックスの状態を管理している「checked」属性というものが存在しているということは
ご存知の上でご質問されていらっしゃいますでしょうか？？
なんだかちょっと気になっちゃって。
ご存知であれば申し訳ありません。

Answer 1

MutationObserver

new MutationObserver(function(mutations) {
  var cnt = $('.tree-checkbox1').length;
  console.log(cnt);
}).observe(document.documentElement, { subtree: true, attributes: true });

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

ただし、子孫ノードをすべて監視するのは効率がいいとは言えず、ライブラリ側で提供されているものがあるなら利用したほうがいいでしょう。
たとえば EasyUI の tree ではイベント onCheck と メソッド getChecked が用意されているため次のように書けます。

    onCheck: function(node, checked) {
        var nodes = $('#tt').tree('getChecked');
        console.log(nodes.length);
    }

http://www.jeasyui.com/demo/main/index.php?plugin=Tree
http://www.jeasyui.com/documentation/index.php

Answer 2

tree-checkbox0⇒tree-checkbox1

これは

• tree-checkbox0が外れる
• tree-checkbox1がつく

のダブルで処理が走りますが大丈夫ですか？

Comments

[yambejp]

<script>
$(function(){
$('.tree-checkbox').on('change',function(){
$(this).toggleClass('tree-checkbox0',!$(this).prop('checked'));
$(this).toggleClass('tree-checkbox1',$(this).prop('checked'));
});
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log([
$('.tree-checkbox0').length,
$('.tree-checkbox1').length,
]);
});
});
const config = {attributes: 'className'};
$('.tree-checkbox').each(function(){
observer.observe($(this).get(0), config);
});
});
</script>
<input type="checkbox" class="tree-checkbox tree-checkbox0">
<input type="checkbox" class="tree-checkbox tree-checkbox0">
<input type="checkbox" class="tree-checkbox tree-checkbox0">

[yambejp]

codepenサンプル

https://codepen.io/yambejp/pen/NWqdmvL