jQueryを使用せずにJavaScriptを使用してクラス名でチェックした各チェックボックスを実行するには

Question

下のjqueryコードのjavascriptに直接相当するものはありますか？クライアントはjQueryのを使用したくないので、私は上記のための代替手段を必要とする -

$('.checkbox').each(function() { 
    if ($(this).is(':checked')) { 
     //logic here 
    } 
}); 

私はclass = 'checkbox'でページ上のすべてのチェックボックスを介して実行しようとしています。

私はこれを行うために、最初から長い関数を書くことを避け、JavaScriptに組み込みのものを単純に使用することはできませんが、不可能であるように見えます。

Answer 1

多くの古いブラウザではquerySelectorAllまたはgetElementsByClassNameをサポートしていないので、あなたはそれらのブラウザですべての<input>の要素をループする必要があると思います。しかし、これらの機能を最初にチェックするのが常にベストです。

第二に、あなたはそれがthis.checkedを探している場合に行う非常に遅いパスです$(this).is(":checked") — もないjQueryので—を使用しないでください。これは、あなたが軌道に乗る必要があります

：

var base = document, 
    inps, tmp, i = 0, reg = /\bcheckbox\b/; 

// getElementsByClassName is the fastest method 
if (base.getElementsByClassName) 
    inps = base.getElementsByClassName("checkbox"); 
// Followed by querySelectorAll 
else if (base.querySelectorAll) 
    inps = base.querySelectorAll(".checkbox"); 
// But if neither exist, loop through all the elements and check the class 
else { 
    inps = []; 
    var tmp = base.getElementsByTagName("input"); 
    i = tmp.length; 
    while (i--) { 
     if (reg.test(tmp[i].className) 
      inps.push(tmp[i]); 
    } 
} 

// Finally, loop through the matched elements and apply your logic 
i = inps.length; 
while (i--) { 
    var current = inps[i]; 
    if (current.checked) { 
     // logic here 
    } 
} 

を上記の例では、任意の要素にbaseの値を変更することができます。つまり、これらの要素に共通の親ノードまたは祖先ノードがある場合は、その要素をベースとして設定し、より高速に実行する必要があります。g：

var base = document.getElementById("myForm"); 

Answer 2

var checkboxes = document.getElementsByClassName('checkbox'); 

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

以下のコメントを参照してください。古いバージョンのIEやその他の古いブラウザにはgetElementsByTagNameを使用できます。

Answer 3

することは、その後、依存のブラウザのようなものだ、次の

var all = document.getElementsByClassName('checkbox'); 
for (var i = 0; i < all.length; i++) { 
    var current = all[i]; 
    if (current.checked) { 
    // Logic here 
    } 
} 

Answer 4

を試してみてください。しかし、現代のブラウザでは、document.getElementsByClassName('checkbox')を使用して、繰り返し処理する配列を取得すると、is(':checked')が一般的になりますif(array[i].checked){}。

compatible browsersについてはお気軽にお問い合わせください。 Internet Explorer 5.5,6,7で動作しないことがわかります。

jQueryはsizzle about hereでこれを解決します。

だから、それは次のようになります。

var allCheckbox; 
if (document.getElementsByClassName) { 
    allCheckbox = document.getElementsByClassName('checkbox'); 
} else { 
    allCheckbox = new Array(); 
    var i = 0; 
    var all = document.getElementsByTagName('*') { 
    for (var j=0; j < all.length; j++) { 
    //Comparison cribbed from sizzle 
    if ((" " + (all[j].className || all[j].getAttribute("class")) + " ") 
     .indexOf('checkbox') > -1 
    ) { 
     allCheckbox[i++] = all[j]; 
    } 
    } 
} 
for (var i = 0; i < allChecked.length; i++) { 
    if (allChecked[i].checked) { 
    // Logic here 
    } 
} 

最後の注意：getElementsByTagNameの（ '*'）のInternet Explorer 5.5では動作しません。

Answer 5

JavaScriptには、DOM要素をIDまたはタグ名で取得するためのメソッドが組み込まれていますが、クラスはisn't supported in older versions of IEで選択しています。しかし、すべてのinput秒を取得し、checkboxタイプのためにそれらをテストするために、かなり速いのようになります。

var x=document.getElementsByTagName("input"); 
for (var i=0; i<x.length; i++) { 
    if (x[i].type === "checkbox" && x[i].checked) { 
     // do something 
    } 
} 

彼らは複数のクラスを持っている場合、そのクラスは、「チェックボックス」ですが、これは複雑になる場合にもテストすることができます。そうでない場合は、次の

var x=document.getElementsByTagName("input"); 
for (var i=0; i<x.length; i++) { 
    if (x[i].className === "checkbox" && x[i].checked) { 
     // do something 
    } 
}