Как подсчитать количество отмеченных флажков с помощью массива

Я пытаюсь проверить количество проверочных проверок с помощью информации из массива, но я продолжаю получать неопределенные значения. Я должен использовать массив, переключатель и должен быть в JavaScript для этого проекта. Я не могу использовать какой-либо другой язык программирования.Как подсчитать количество отмеченных флажков с помощью массива

Как я могу правильно настроить свои флажки? Я также не знаю, как я мог бы реализовать переключатель в эту функцию. +

Пожалуйста, помогите, я работал над этим около 4 часов, ища везде, чтобы найти полезный ответ.

Мой HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Project</title> 
</head> 
<body> 

<form id="frmCareer" method="get" action="prjFormEvent.js"> 
<table id="tblCareer"> 

<th>Directions: Check of the items you think you would enjoy in each section.<br /> Mark as many items that apply.</th> 

<tr><td><strong><label id="lblRealistic"> 
"R" Section</label></strong> 
<div id="realisticTotal"></div> 
<br /> 
<input type="checkbox" 
name="chkRealistic" 
onclick="getRealistic()" 
value="chkRealistic1">Repair a car 
<br /> 
<input type="checkbox" 
name="chkRealistic" 
onclick="getRealistic()" 
value="chkRealistic2">Do wood working 
<br /> 
<input type="checkbox" 
name="chkRealistic" 
onclick="getRealistic()" 
value="chkRealistic3">Refinish furniture 
<br /> 
<input type="checkbox" 
name="chkRealistic" 
onclick="getRealistic()" 
value="chkRealistic4">Explore a forest 
<br /> 
</tr></td> 

     </table><!--End of tblWhichCareer--> 
    </form><!--End of frmWhichCareer--> 

</body> 
</html>

Мои JavaScript

Global Variables 
var getCareer = new Array(); 
getCareer["chkRealistic1"] = 1; 
getCareer["chkRealistic2"] = 1; 
getCareer["chkRealistic3"] = 1; 
getCareer["chkRealistic4"] = 1; 

function getRealistic() 
{ 
    var rTotal = 0; 
    var selectedRealistic = document.forms["frmCareer"]["chkRealistic"]; 

    rTotal = getCareer[selectedRealistic.value] 

    document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked" 
}//End of function getRealisticCareer()

источник

2015-04-17 Taylor Mack

попробовать с помощью этого 'document.querySelectorAll ('ввод [тип = "флажок" ]: checked '). length' –

@Rakesh_Kumar Вы должны указать это как ответ, так как это * ответ *. :) –

Я пропустил несколько минут. Вы должны были бы поместить его в ответы :) –

Вы пропустили тот факт, что эта линия

var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];

возвращает массив флажков с именем chkRealistic (в вашем примере, все четыре из них).

Вместо присвоения результата функции getCareer к RTOTAL, вы должны перебирать массив HTMLInput в selectedRealistic проверки для. проверено Недвижимость.

var rTotal = 0; var selectedRealistic = document.forms["frmCareer"]["chkRealistic"]; for (var sel = 0; sel < selectedRealistic.length; sel++) { if (selectedRealistic[sel].checked) rTotal += getCareer[selectedRealistic[sel].value] } document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"

Вы можете проверить запущенный пример здесь: http://codepen.io/pabloapa/pen/jPNPNg

источник

2015-04-17 04:12:40 pabloapa

Попробуйте использовать:

document.getElementById("lblRealistic").innerHTML = document.querySelectorAll('input[name="chkRealistic"]:checked').length + "/9 Checked";

источник

2015-04-17 04:10:41

Попробуйте это:

function getRealistic() 
{ 
var rTotal = 0; 

for(i=0; i<document.forms[0].chkRealistic.length; i++){ 
    if(document.forms[0].chkRealistic.item(i).checked){ 
     rTotal++; 
    } 
} 

document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked" 
}

источник

2015-04-17 04:11:27

Здесь попробовать это также на Plunker: http://plnkr.co/edit/085ZtojBgvumktHwQSGf?p=preview

<form id="frmCareer" method="get" action="prjFormEvent.js"> 
    <table id="tblCareer"> 
     <tr> 
     <th>Directions: Check of the items you think you would enjoy in each section. 
      <br />Mark as many items that apply.</th> 
     </tr> 
     <tr> 
     <td><strong><label id="lblRealistic"> 
"R" Section</label></strong> 
      <div id="realisticTotal"></div> 
      <br /> 
      <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic1">Repair a car 
      <br /> 
      <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic2">Do wood working 
      <br /> 
      <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic3">Refinish furniture 
      <br /> 
      <input type="checkbox" name="chkRealistic" onchange="getRealistic(this)" value="chkRealistic4">Explore a forest 
      <br /> 
     </td> 
     </tr> 


    </table> 
    <!--End of tblWhichCareer--> 
    </form> 
    <!--End of frmWhichCareer--> 
    <script language="JavaScript"> 
    var getCareer = new Array(); 
    getCareer["chkRealistic1"] = 0; 
    getCareer["chkRealistic2"] = 0; 
    getCareer["chkRealistic3"] = 0; 
    getCareer["chkRealistic4"] = 0; 

    function getRealistic(cbox) { 
     var rTotal = 0; 
     var key = cbox.value; 
     getCareer[key] = cbox.checked ? 1 : 0; 

     for (var key in getCareer) { 
     rTotal += getCareer[key]; 

     } 

     document.getElementById("lblRealistic").innerHTML = rTotal + "/9 Checked" 
    } //End of function getRealisticCareer() 
    </script>

источник

2015-04-17 04:17:37 Hoyen

Как подсчитать количество отмеченных флажков с помощью массива

ответ

Смежные вопросы