JQueryの選択/逆選択の2番目の失敗を解決する方法

最近、プロジェクトで選択/選択解除機能をテストしているときに、親ボックスを初めて選択/選択解除したときに、サブボックスの全選択/非選択状態が同期されるという問題が発生しました。親ボックスをクリックすると、子ボックスが応答しなくなります。この記事では、JQuery の完全選択/逆選択が 2 回目に失敗する問題を解決する記事をお届けします。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

元のコードの大まかな構造の鍵は次のとおりです:

function selectAll(obj){
    $('input[name="xxx[]"]').attr("checked",obj.checked);
}

<input type="checkbox" id="mother" name="mother" onclick="selectAll(this);"/>全选

<input type="checkbox" id="son1" name="xxx[]" />子框<input type="checkbox" id="son2" name="xxx[]" />子框<input type="checkbox" id="son3" name="xxx[]" />子框<input type="checkbox" id="son4" name="xxx[]" />子框

ステップ 1: ポジティブな波を試してください:

function selectAll(obj){
   if(obj.checked) {
    $('input[name="xxx[]"]').attr("checked", true);
   } else {
    $('input[name="xxx[]"]').removeAttr("checked");
   }
}

Pale ----- まったく効果がありません。放棄してください。

ステップ 2: インターネットで簡単に検索したところ、この問題は数千マイル離れた場所でも発生していることがわかりました。いくつかをクリックして調べてみると、基本的には attr の代わりに prop を使用すると問題を解決できるとのことでしたが、解決策は次のとおりです:

ただし、プロジェクトで使用されているバージョンは 1.6 よりも低く、バージョンは変えない方が良いと言われたので断念しました。

ステップ 3: JQuery を放棄するしかありません...ネイティブの JS 記述方法を使用してみてください。 コードは次のとおりです:

function selectAll(obj){
 var xxx = document.getElementsByName("xxx[]");
  if(obj.checked) {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = true;
   }
  } else {
   for(var i = 0;i < xxx.length;i++) {
    xxx[i].checked = false;
   }
  }
}

テストしてスムーズに解決します。実際、これは小さな問題ですが、この問題を 1 つの枠に限定することはできず、別の角度から考えると、より適切に問題を解決できることがよくあります。

関連する推奨事項:

jsのすべてを選択および選択解除する実装

jsのすべてを選択し、チェックボックスを反転する方法

フロントエンドの選択と反転を実装するJs

以上がJQueryの選択/逆選択の2番目の失敗を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。