javascript - すべての要素のプロパティを直接更新できますか

Question

例えば：

var inputs = document.querySelectorAll('input[type="checkbox"]');

checkedすべての入力でをtrueに設定したいと思います。これは、forループを使用せずに、jQueryのように実行できますか？

Answer 1

querySelectorAllを返しますNodeList。リスト内の各アイテムを変更するには、リストを反復処理する必要があります（jQueryは、.eachを使用してバックグラウンドでもコレクション全体をループします）

ループ（for、whileなど）を使用するか、プロトタイプでforEachメソッドを使用することができますArray

https://developer.mozilla.org/en-US/docs/DOM/NodeList#Workarounds

Answer 2

いいえ、これはノードに対する何らかの形式の反復なしでは実行できません。jQueryはノードも反復処理し、ユーザーから非表示にするだけです。

jQueryのようなスタイルに最も近いのは、サポートされているブラウザーで.forEach ^{[MDN]を使用することです。}

[].forEach.call(inputs, function() {
    this.checked = true;
});

Answer 3

forループを使用せずに

ある時点で、何らかの形のループが必要になります。あなたはそれを抽象化することを望んでいますか？

NodeListsは-likeなので、のようなイテレータを含む、からのメソッドをArray実行できcallます。MDNの例：applyArray.prototypeforEach()

DOMを拡張しない別のアプローチ：

var forEach = Array.prototype.forEach;

var links = document.getElementsByTagName('a');
forEach.call(links, function(link){ // works in most browsers (please document here if you find browsers where it doesn't)
  link.style.color = '#0F0';
});

ただし、ループ（この場合）にもforEach() 依存することに注意してください。while

Answer 4

純粋なJavaScriptを使用すると、次のようにquerySelectorAll()関数を使用できます。

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

for(var i=0; i<checkboxes.length; i++) {  checkboxes[i].checked = true; }

残念ながら、これはあなたが避けたいと思っていたループを回避しません。また、IE8はCSS2.1セレクターにのみフックでき、PreIE8はでサポートされていないのでここで確認できるように完全なクロスブラウザー互換性もありません。それ以外のすべては、多くのコードを使用せず、jQueryを回避することなく実行できる最善の方法です。

jQueryを避けたいと思いますが、気が変わったら次のことを試してみてください。

$('input[type="checkbox"]').attr('checked', 'checked')

これは、チェックボックス入力にフックし、jQueryattr()関数を使用してその属性をチェックに設定する必要があります。

これが機能しない場合は、チェックボックスにチェックボックスなどの独自のクラス名を付けて、次のようにしてみてください。

$('.checkbox').attr('checked', 'checked')

これは互換性の問題に役立ち、ループを回避しますが、jQueryルートを使用したくない場合は、無視してください。