jqueryチェックボックスでチェックされたバグ問題の解決策とanalyze_jquery

プロジェクトに取り組んでいたときに、jQuery のチェックボックスのバグに遭遇しました。マスターに相談した後、何が起こっているのかを把握し、ここに記録して皆のために分析しました。

まずコードを入力してください:

コードをコピーします コードは次のとおりです:

<フォーム>
あなたの好きなスポーツは何ですか? すべて選択/すべて選択解除

フットボール
バスケットボール
バドミントン
卓球
                                                                                       

コードをコピーします コードは次のとおりです:

$("#CheckedAll").click(function () {
If ($(this).is(":checked")) {
$("[name=items]:checkbox").attr("checked", true);
} else {
$("[name=items]:checkbox").attr("checked", false);
}
});

1回目は問題なかったのですが、2回目は問題が発生して選択できなくなりました

解決策: attr() を prop() に置き換えます

コードをコピーします コードは次のとおりです:

$("#CheckedAll").click(function () {
If ($(this).is(":checked")) {
$("[name=items]:checkbox").prop("checked", true);
} else {
$("[name=items]:checkbox").prop("checked", false);
}
});

追記: prop() と attr() の違い:

最近 iteye のニュースで jQuery が 1.6.1 にアップデートされたことを知りました。以前のバージョンからの最大の変更点は、.prop メソッドの追加です。ただし、.prop() メソッドと .attr() メソッドを文字通り区別することは困難です。中国語では、プロパティとアトリビュートはどちらも「属性」を意味します。
以下は、このブログ投稿 (javascript:mctmp(0);) に基づいた .prop() と .attr() の使用法の簡単な翻訳です。

1. 1.5.2 から 1.6.1 にアップグレードします

新しいメソッド .prop() と .attr() メソッドの変更の導入により、jQuery 1.6.1 は属性とプロパティの違いと関係についての激しい議論を引き起こしました。同時に、1.6.1 ではいくつかの下位互換性の問題も解決されています。 1.5.2 から 1.6.1 にアップグレードする場合、属性コードを変更する必要はありません。

以下は、jQuery 1.6 および 1.6.1 の Attributes モジュールの変更点と、.attr() メソッドと .prop() メソッドの推奨される使用方法について説明します。ただし、前述したように、jQuery 1.6.1 では、以前のすべてのケースで使用されていた .attr() メソッドを使用できます。

2. 起こった変化

Attributes モジュールの変更により、属性とプロパティの間のあいまいさが解消されましたが、1.6 より前のすべてのバージョンでは属性とプロパティが単一のメソッド (.attr()) で処理されていたため、jQuery コミュニティに多少の混乱が生じました。しかし、古い .attr() メソッドにはいくつかのバグがあり、保守が困難です。 jQuery1.6.1 は属性モジュールを更新し、いくつかのバグを修正しました。

特に注意していただきたいのは、checked、selected、readonly、disabled などのブール属性は、1.6.1 でも 1.6 以前と同じように扱われることです。これは次のコードを意味します:

コードをコピーします コードは次のとおりです:

$(“:checkbox”).attr(“チェック済み”、true); $(“オプション”).attr(“選択済み”、true); $(“input”).attr(“readonly”, true); $(“入力”).attr(“無効”、true);


次のようなコードでも:

コードをコピーします

コードは次のとおりです: if ( $(“:checkbox”).attr(“checked”) ) { /* 何かをする */ }

以前に期待されたパフォーマンスを維持するために 1.6.1 に変更を加える必要はありません。

jQuery 1.6 の .attr() メソッドの変更をより明確にするために、.attr() の使用例をいくつか示します。これは jQuery の以前のバージョンでも正常に動作しますが、現在は .attr() を使用する必要があります。代わりに () メソッド:

まず、ウィンドウやドキュメントで .attr() メソッドを使用することは、jQuery 1.6 では正しく機能しません。これは、ウィンドウやドキュメントに属性を含めることができないためです。これらにはプロパティ (location やreadyState など) が含まれており、.prop() メソッドを使用するか、単純にネイティブ JavaScript メソッドを使用して操作する必要があります。 jQuery 1.6.1 では、ウィンドウとドキュメントで .attr() を使用すると、エラーがスローされるのではなく、.prop を使用するように自動的に変換されます。

第 2 に、checked、selected、および前述のその他のブール属性は、これらの属性と対応するプロパティの間に特別な関係があるため、特別に扱われます。基本的に、属性は次の HTML に表示されるものです:

<入力タイプ=”チェックボックス”チェック済み=”チェック済み”>

check などのブール属性は、デフォルト値または初期値にのみ設定されます。チェックボックス要素では、チェックボックス要素が選択されているかどうかに関係なく、ページの読み込み時にチェックされた属性が設定されます。

プロパティは、ブラウザが現在の値を記録するために使用するものです。通常、プロパティは対応する属性 (存在する場合) を反映します。しかし、これはブール属性の場合には当てはまりません。ブール値プロパティは、ユーザーがチェックボックス要素をクリックするか、select 要素のオプションを選択すると、最新の状態に保たれます。ただし、対応するブール属性は異なります。前述したように、これらはブラウザによって初期値を保存するためにのみ使用されます。

コードをコピーします

コードは次のとおりです: $(“:checkbox”).get(0).checked = true; // $(":checkbox:first").prop("checked", true) と同じです

jQuery1.6 では、以下のメソッドを使用してチェックを付けた場合:

コードをコピー

コードは次のとおりです: $(“:checkbox”).attr(“チェック済み”、true);

チェックボックス要素は設定が必要なプロパティであるためチェックされませんが、設定はすべて初期値になります。

しかし、jQuery 1.6 がリリースされると、jQuery チームは、ブラウザーがページの読み込みのみを考慮する場合、いくつかの値を設定することは特に役に立たないことを理解しました。したがって、下位互換性と .attr() メソッドの有用性を維持するために、jQuery 1.6.1 では引き続き .attr() メソッドを使用してこれらのブール属性を取得および設定できます。

最も一般的な属性は、checked、selected、disabled、readOnly ですが、jQuery 1.6.1 がサポートする .attr() を使用したブール属性/プロパティの動的取得と設定の完全なリストは次のとおりです。

オートフォーカス、自動再生、非同期、チェック済み、コントロール、遅延、無効、
非表示、ループ、複数、オープン、読み取り専用、必須、スコープ付き、選択済み

(翻訳者注: ほとんどは html5 に追加された新しい属性です)

これらのブール属性/プロパティを設定するには .prop() メソッドを使用することをお勧めします。これらのユースケースが .prop() メソッドを使用するように変換されていない場合でも、コードは jQuery 1.6 で通常どおり実行できます。 1.

以下は、いくつかの属性とプロパティのリストです。通常の状況では、それらを取得および設定するには、対応するメソッド (以下のリストを参照) を使用する必要があります。以下は最初の使用法ですが、.attr() メソッドはすべての属性で機能します。

注: 一部の DOM 要素プロパティも以下にリストされていますが、新しい .prop() メソッドでのみ実行されます

*例: window.location
**必要な場合は (必要な場合は) .width()

値の取得/設定には .attr() も .prop() も使用しないでください。代わりに .val() メソッドを使用してください (.attr("value","somevalue") を使用しても、1.6 以前と同様に引き続き機能します)

3. 推奨される使用法の概要

.prop() メソッドは、ブール属性/プロパティ、および HTML に存在しないプロパティ (例: window.location) を処理するために使用する必要があります。他のすべての属性 (HTML に表示される属性) は、引き続き .attr() メソッドを使用して操作できます。

上記の概要は十分に明確に説明されているので、これ以上要約する必要はありません。