web-dev-qa-db-ja.com

HTMLでチェックされているチェックボックスの数を数える

だから基本的に私はチェックされているチェックボックスの数をカウントしたい。私はコードを正常に数えるまでコードを取得しますが、チェックボックスのチェックマークの数を示すアラートを入れたいと思います。コードはこれを行いますが、合計数を表示せず、更新ごとに合計を増やします。合計数を表示する方法を知りたいだけです。

ラジオボタン「はい」をクリックすると、合計が表示されます。

<br />Apples
<input type="checkbox" name="fruit" />Oranges
<input type="checkbox" name="fruit" />Mango
<input type="checkbox" name="fruit" />
<br />Yes
<input type="radio" name="yesorno" id="yes" onchange="checkboxes()"

function checkboxes(){
    var inputElems = document.getElementsByTagName("input"),
    count = 0;
    for (var i=0; i<inputElems.length; i++) {
    if (inputElems[i].type === "checkbox" && inputElems[i].checked === true){
        count++;
        alert(count);
    }
}}
javascripthtmlformscheckboxonchange
20
roro

これはトリックを行う必要があります：

alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

29
Marlon Bernardes

jqueryを使用してこれを試してください

方法1：

alert($('.checkbox_class_here :checked').size());

方法2：

alert($('input[name=checkbox_name]').attr('checked'));

方法：3

alert($(":checkbox:checked").length);
19
mohsinali1317

このコードを試してください

 <br />Apples
                <input type="checkbox" name="fruit" checked/>Oranges
                <input type="checkbox" name="fruit" />Mango
                <input type="checkbox" name="fruit" />

                <br />Yes
<input type="radio" name="yesorno" id="yes" onClick="checkboxes();" />

Javascript

     function checkboxes()
      {
       var inputElems = document.getElementsByTagName("input"),
        count = 0;

        for (var i=0; i<inputElems.length; i++) {       
           if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
              count++;
              alert(count);
           }

        }
     }

FIDDLE DEMO

6
Girish

最初のコードはほとんど正しかった。ラインアラート（カウント）;間違った場所にあった。次のように2番目の閉じ括弧の後に来るはずでした：

 function checkboxes()
  {
   var inputElems = document.getElementsByTagName("input"),
    count = 0;

    for (var i=0; i<inputElems.length; i++) {       
       if (inputElems[i].type == "checkbox" && inputElems[i].checked == true){
          count++;
       }
    }
    alert(count);
 }

間違った場所では、チェックボックスごとに警告メッセージが表示されていました。

2
Jon Flowers
var checkboxes = document.getElementsByName("fruit");
for(int i;i<checkboxes.length;i++)
{
if(checkboxes[i].checked==0){checkboxes.splice(i,1);}
}
alert("Number of checked checkboxes: "+checkboxes.length);
1
nicael

これについてはMarlon Bernardesに感謝します。 alert(document.querySelectorAll('input[type="checkbox"]:checked').length);

それぞれに異なるチェックボックス名を持つ複数のフォームがある場合、上記のコードはすべてのフォームのすべてのチェックボックスをカウントします。

これを克服するには、名前で分離するように変更できます。

var le = document.querySelectorAll('input[name="chkboxes[]"]:checked').length;
1
MikeRG