ホームページ > 記事 > ウェブフロントエンド > JQuery のすべての選択の逆選択 2 番目の失敗の解決策

JQuery のすべての選択の逆選択 2 番目の失敗の解決策

小云云オリジナル: 2018-01-25 11:38:191268ブラウズ

この記事は主に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 つの枠に限定することはできず、別の角度から考えると、より適切に問題を解決できることがよくあります。

JQuery のすべての選択の逆選択 2 番目の失敗の解決策

関連記事