如何計算表單中的所有復選框（Javascript）

Question

我有多個動態生成的復選框。 所以我不知道每次生成多少個復選框。 我需要一些JavaScript方法來計算表單中復選框的總數。

 <input type="checkbox" value="username1" name="check[0]" id="1" /><br/>
 <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
 <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>

我無法更改復選框的名稱，因為我需要將值作為數組發送到serverside PHP腳本。

Answer 1

由於所有其他答案都是基於jquery的，我將提供一個純粹的JavaScript解決方案。 假設以下形式：

<form id="myform">
    <input type="checkbox" value="username1" name="check[0]" /><br/>
    <input type="checkbox" value="userusername2" name="check[1]" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" /><br/>
</form>

您可以使用以下邏輯計算復選框元素的數量：

<script type="text/javascript">
var myform = document.getElementById('myform');
var inputTags = myform.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}
alert(checkboxCount);
</script>

順便說一句：正如其他人所說，任何HTML標記中的id屬性在文檔中應該是唯一的。 我在上面的示例HTML中省略了你的id="1"屬性。

更新：

如果您只想計算整個頁面上的所有復選框元素而不使用包含表單元素，則應該可以：

<script type="text/javascript">
var inputTags = document.getElementsByTagName('input');
var checkboxCount = 0;
for (var i=0, length = inputTags.length; i<length; i++) {
     if (inputTags[i].type == 'checkbox') {
         checkboxCount++;
     }
}
alert(checkboxCount);
</script>

Answer 2

在純JavaScript中：

var myForm = document.forms[nameOrIndex];
var inputs = myForm.getElementsByTagName('input');
var checkboxes = [];
for(var i=0;i<inputs.length;i++){
  if(inputs[i].getAttribute('type').toLowerCase() == 'checkbox'){
    checkboxes.push(inputs[i]);
  }
}
alert(checkboxes.length);

Answer 3

我會選擇：

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

如果您需要特定表單，則需要選擇表單並將其用作調用querySelectorAll的基礎而不是文檔或更改選擇器以包含表單。

<form id="aForm">
    <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>
</form>
<form id="bForm">
    <input type="checkbox" value="username1" name="check[0]" id="1" /><br/>
    <input type="checkbox" value="userusername2" name="check[1]" id="1" /><br/>
    <input type="checkbox" value="userusername3" name="check[2]" id="1" /><br/>
</form>

然后使用：

alert(document.querySelectorAll("#aForm > input[type=checkbox]").length); //shows 2

alert(document.querySelectorAll("#bForm > input[type=checkbox]").length); //shows 3

注意：Selectors API僅適用於較新的瀏覽器：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1和Opera 10。

Answer 4

你可以使用jquery

var len = $('input:checkbox').length;

alert(len);

工作演示

Answer 5

alert( $("form input[type='checkbox']").length );

將使用jQuery為您提供表單中的所有復選框。

Answer 6

當你標記你的問題php ，你似乎已經使用某種編號的表單字段，您也可以直接echo的是PHP的計數器的JavaScript變量：

<?php
//
?>
<script language="javascript" type="text/javascript">
  var checkbox_counter = <?php echo $your_counter_in_php; ?>
</script>
<?php
//
?>

順便說一句，在html中，你只能在頁面上有一個id ，而且它不能以數字開頭。

Answer 7

如果你有jQuery，你可以做類似的事情

alert ($(':checkbox').length ());

如果沒有那么你將需要document.getElementsByTagName ('input') ，迭代你得到的集合，並在每次遇到一個其類型屬性設置為復選框的計數器時遞增一個計數器。