昨日の朝、Jquery を使ってすべてを選択する方法について書きました
皆さんのご意見を参考に、私のレベルに限界があり、考えられない点も多々あるため、プログラムの稚拙な部分を修正しました。
記事の最後で疑問を提起し、それを呼び出すための普遍的なメソッドを書きたかったので、夜帰宅してこの記事を思いつきました。
以下の例は、全員で議論して学ぶためのものであり、良いと思われる場合は、プロジェクトに直接適用することもできます。
1: このメソッドを作成する理由
一文ですべてを選択する、または何も選択しないというオンラインの方法はたくさんありますが、すべてを選択するチェックボックスはその下のサブチェックボックスを制御できますが、その下のサブチェックボックスも制御できるはずです。このようにして、すべての選択を制御します。これが私の方法です。
2: 開発プロセス: 汎用性を実現するには、グループ化する方法と、グループ内のどのチェックボックスをすべて選択するかを決定する方法の 2 つの問題を解決する必要があります。考えてみたところ、名前によるグループ化が使用できると思いました。 、
クラスを使用して、完全に選択する必要があるチェックボックス グループであるかどうかを判断します。まず、選択する必要があるすべてのクラスを見つけてから、name 属性に基づいて他のサブチェックボックスを見つけます。
を操作できます。
3: ファイル。以下は私が実装した js で、xs_checkbox_all.js として保存されます
$(document).ready(function () {
var xsChk = "xsChk";//定義されたスタイル
var xsChkAll = "input[type='checkbox'][class='" xsChk "'][name]";//このスタイルを定義するすべてのチェックボックス
$(xsChkAll).each(function () {
var name = $(this).attr("name");
name = "input[type='checkbox'][class!='" xsChk "'][name='" name "']";//この全選択ボックスの下にあるサブチェックボックス
$(this).click(function () {
$(name).attr("checked", $(this)[0].checked);
})
var xschk = $(this);
$(名前).click(function () {
var IAll = $(name).length; //このサブプロジェクトの下のすべてのチェックボックスの数
var IChk = $(name ":checked").length; //このサブプロジェクトでチェックされているすべてのチェックボックスの数
var isAllChecked = true; //すべて選択されているかどうか
if (IAll != IChk) {
isallchecked = false;
}
$(xschk).attr("checked", isAllChecked);
});
});
});
ページの使用法
