Count checked複選框

Question

我是HTML新手，我在HTML頁面的表單上有一個複選框列表。

每行上的每個複選框代表不同的類別「我」「D」「C」和「S」。我的代碼

部分如下：

<form> 
    1.<input type="checkbox" name="Personality_1.1" value="I"/>Animated &nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_1.2" value="D" />Adventurous &nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_1.3" value="C" />Analytical &nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_1.4" value="S" />Adaptable<br /><br /> 

    2.<input type="checkbox" name="Personality_2.1" value="I"/>Playful&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_2.2" value="D" />Persuasive&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_2.3" value="C" />Persistent&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_2.4" value="S" />Peaceful<br /><br /> 

    3.<input type="checkbox" name="Personality_3.1" value="I"/>Sociable&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_3.2" value="D" />Strong Willed&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_3.3" value="C" />Self-sacraficing&nbsp;&nbsp;&nbsp;&nbsp 
    <input type="checkbox" name="Personality_3.4" value="S" />Submissive<br /><br /> 

我需要找出多少價值的「我」複選框被選中，有多少值「d」複選框被選中，等等，然後在提交表單時顯示每個類別的總數。

這樣的：「五德公司已檢查」，「三個C已檢查」

有沒有一種方法，我可以用Javascript或PHP這樣做呢？如果有的話，任何人都可以幫助我指導如何去做？

Answer 1

好，使用PHP，假設你提交表單與郵政：

$counts = array_count_values($_POST); 

而且你會得到一個關聯數組作爲鍵的值並作爲值計數。因此，如果例如3 D已被檢查，$counts['D']將保持「3」。

Answer 2

jquery-：

var numberOfCheckboxesSelected = $('input[type=checkbox]:checked').length; 

javascript--：

var checkboxLength = document.forms["formName"].elements["checkbox[]"].length; 
var checkboxes = document.forms["formName"].elements["checkbox[]"]; 


for(var i = 0; i < checkboxLength; ++i) { 
    if(checkboxes[i].checked) { 
     // do stuff 
    } 
} 

Answer 3

你應該寫你的表單代碼是這樣的：

<form> 
    1.<input type="checkbox" name="chkI[]" value="I1"/>Animated 
    <input type="checkbox" name="chkD[]" value="D1" />Adventurous 
    <input type="checkbox" name="chkC[]" value="C1" />Analytical 
    <input type="checkbox" name="chkS[]" value="S1" />Adaptable 

    2.<input type="checkbox" name="chkI[]" value="I2"/>Playful 
    <input type="checkbox" name="chkD[]" value="D2" />Persuasive 
    <input type="checkbox" name="chkC[]" value="C2" />Persistent 
    <input type="checkbox" name="chkS[]" value="S2" />Peaceful 

    3.<input type="checkbox" name="chkI[]" value="I3"/>Sociable 
    <input type="checkbox" name="chkD[]" value="D3" />Strong Willed 
    <input type="checkbox" name="chkC[]" value="C3" />Self-sacraficing 
    <input type="checkbox" name="chkS[]" value="S3" />Submissive 
</form> 

看那「名」和「價值」屬性。我讓我改變了他們的價值觀。

你說：

我需要找出多少價值的「我」複選框被選中，有多少值「d」複選框被選中，等等，然後 顯示當提交表格時，每個類別的總數爲。

如果你犯了一個提交...

<?php 

if(!empty($_GET['chkD'])) { 
    $counterChkD = 0; 
    foreach ($_GET['chkD'] as $chkD){ 
     echo $chkD."\n"; 
     //echoes the value set in the HTML form for each checked checkbox associated with the "D" value 
     //so, if I were to check "Adventurous", "Persuasive", and "Strong Willed" it would echo value D1, value D2, value D3. 
     $counterChkD++; 
    } 
    echo "# of 'D-CheckBoxes' checked: ".$counterChkD."\n"; 
} 

?> 

Answer 4

怎麼樣......

var getCount = function(type) { 
    return document.querySelectorAll('input[value='+type+']:checked').length; 
} 
alert(getCount('A') + "As have been selected"); 

，它看起來像你將使用無線電組，而不是複選框會更好。從查看您的html，您是否希望用戶能夠在每個部分中選擇多個項目？

Answer 5

舉個例子，你可以使用這樣的事情：

window.onload = function() { 
    document.getElementById("btn1").onclick = function() { 
     var allChk = document.getElementsByTagName("input"), 
      counts = {}, 
      i, j, cur, val; 
     for (i = 0, j = allChk.length; i < j; i++) { 
      cur = allChk[i]; 
      if (cur.type === "checkbox") { 
       if (!(cur.value in counts)) { 
        counts[cur.value] = 0; 
       } 
       if (cur.checked) { 
        counts[cur.value]++; 
       } 
      } 
     } 

     for (val in counts) { 
      console.log("There are " + counts[val] + " " + val + "'s checked"); 
     } 
    }; 
}; 

DEMO：http://jsfiddle.net/Dwjez/1/

點擊按鈕，檢查一些複選框後，看看你console看到的結果。它只是找到所有複選框，並將每個值中檢查過的數目存儲在一個對象文字中......然後最後一個循環就是在控制檯中打印結果。

這只是一個事件處理的簡單例子，但我建議看addEventListener vs onclick看另一種處理事件的方式（使用addEventListener）。

Answer 6

這是您想要的代碼。嘗試一下，讓我知道。

<HTML> 
<HEAD> 
<TITLE>Document Title</TITLE> 
</HEAD> 
<BODY> 

<FORM NAME="f1" action="next_page.php" method="post"> 
<input type="checkbox" name="chkGuar[]" value="mike">&nbsp;Mike<br /> 
<input type="checkbox" name="chkGuar[]" value="joy">&nbsp;Joy<br /> 
<input type="checkbox" name="chkGuar[]" value="harry">&nbsp;harry<br /> 
<input type="checkbox" name="chkGuar[]" value="watson">&nbsp;watson<br /> 
<input type="checkbox" name="chkGuar[]" value="george">&nbsp;george<br /> 
<input type="checkbox" name="chkGuar[]" value="peter">&nbsp;Peter<br /> 
<input type="submit" name="chksbmt" value="Send" /> 
<!-- <div id="myrow" style="visibility:hidden"> 
<input type = text name ='txtGRTNo' tabindex = 19 size="20"> 
</div> 
<div width="338" align="left" colspan="3" height="12"></div> !--> 
</FORM> 

</BODY> 
</HTML> 

next_page.php

<?php 
if(isset($_POST['chksbmt'])){ 
    $counts = count($_POST['chkGuar']); 
    echo "this is the next page. you checked $counts checkbox <br /><br />"; 
    for($i=1;$i<=$counts;$i++){ 
    echo "<input type='text' style='border:1px solid #000;' value='your text box here' /><br/><br/>"; 
    } 
}