チェックボックスのカスケード選択
4443 ワード
ユーザー権限ページを作成するときに、チェックボックスのカスケード選択の問題が発生しました.すでにあるカスケード選択に関するコードを参考にしますが、多かれ少なかれ問題があるか、自分のニーズを満たしていないことに気づき、自分で書きました.完全にjQueryを使っていないのは、やはり先端を専攻しているわけではないので、使い勝手が悪いわけではありません.
カスケード要件:
1、ノードを選択し、そのノードのすべてのサブノードを選択し、そのノードのすべての親ノードを選択します.
2、あるノードの選択を解除し、そのノードのすべてのサブノードが選択を解除する.このノードの親ノードは、現在のノードの選択状況に応じて、選択を解除するかどうかを決定します.
基本的な機能は、選択解除時に親ノードの操作部分に問題が発生することを明確にしています.
基本的な考え方:
各チェックボックスには、Box-{K 1}-{k 2}-{k 3}-{k 4}のような階層関係でID値が付与されます.
①Box-1-0-1のようなチェックボックスを選択すると、
「Box-1-0-1-」を接頭辞とするidのチェックボックスを選択します.
このチェックボックスの親ノード「Box-1」を設定し、「Box-1-0」を選択します.
②Box-1-0-1のようにあるチェックボックスの選択を解除すると、
idが「Box-1-0-1-」を接頭辞とするチェックボックスが選択されていない状態に設定します.
クエリidは、「Box-1-0-」を接頭辞とし、チェックボックスが選択された状態の数であり、0の場合、ノード「Box-1-0」が選択されていない状態に設定される.
クエリidは、「Box-1-」を接頭辞とし、チェックボックスが選択された状態の数であり、0の場合、ノード「Box-1」が選択されていない状態に設定されます.
ここで処理する論理順序に注意してください.
コードは次のとおりです.
カスケード要件:
1、ノードを選択し、そのノードのすべてのサブノードを選択し、そのノードのすべての親ノードを選択します.
2、あるノードの選択を解除し、そのノードのすべてのサブノードが選択を解除する.このノードの親ノードは、現在のノードの選択状況に応じて、選択を解除するかどうかを決定します.
基本的な機能は、選択解除時に親ノードの操作部分に問題が発生することを明確にしています.
基本的な考え方:
各チェックボックスには、Box-{K 1}-{k 2}-{k 3}-{k 4}のような階層関係でID値が付与されます.
①Box-1-0-1のようなチェックボックスを選択すると、
「Box-1-0-1-」を接頭辞とするidのチェックボックスを選択します.
このチェックボックスの親ノード「Box-1」を設定し、「Box-1-0」を選択します.
②Box-1-0-1のようにあるチェックボックスの選択を解除すると、
idが「Box-1-0-1-」を接頭辞とするチェックボックスが選択されていない状態に設定します.
クエリidは、「Box-1-0-」を接頭辞とし、チェックボックスが選択された状態の数であり、0の場合、ノード「Box-1-0」が選択されていない状態に設定される.
クエリidは、「Box-1-」を接頭辞とし、チェックボックスが選択された状態の数であり、0の場合、ノード「Box-1」が選択されていない状態に設定されます.
ここで処理する論理順序に注意してください.
コードは次のとおりです.
<style>
dd, dt{
line-height:40px;
height:40px;
}
</style>
<!-- -->
<div id="content">
<div style="margin: 50px;">
<dl>
<dt>
<input value="" name="" type="checkbox" id="box-2"/>
</dt>
<dd>
<dl>
<dt>
<label>
<input value="" name="" type="checkbox" id="box-2-1"/>
</label>
</dt>
<dd>
<label style="width: 100px;display: inline-block">
<input value="" name="" type="checkbox" id="box-2-1-1"/>
</label>
<label>
<input value="" name="" type="checkbox" id="box-2-1-1-0"/>
</label>
<label>
<input value="" name="" type="checkbox" id="box-2-1-1-1"/>
</label>
<label>
<input value="" name="" type="checkbox" id="box-2-1-1-2"/>
</label>
</dd>
<dd>
<label style="width: 100px;display: inline-block">
<input value="" name="" type="checkbox" id="box-2-1-2"/>
</label>
</dd>
</dl>
</dd>
</dl>
</div>
</div>
<!-- / -->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"/>
<script>
$("input:checkbox").click(function () {
var boxid = $(this).attr('id');
var arr = boxid.split('-');
//
if ($(this).prop("checked")) {
$("input[id^=" + boxid + "-]").prop("checked", true);
var id = arr[0];
for (var i = 1; i < arr.length; i++) {
id += "-" + arr[i];
$("#" + id).prop("checked", true);
}
} else {
//
$("input[id^=" + boxid + "-]").prop("checked", false);
for (var j = 1; j <= arr.length; j++) {
arr.pop();
id = arr.join("-");
if ($("input[id^=" + id + "-]:checked").length == 0) {
$("#" + id).prop("checked", false);
}
}
}
});
</script>
</code></pre>
<br/>
<br/>
</div>
</div>
</div>
</div>