如何计算不同div中的选中复选框

时间:2012-10-08 09:29:53

标签: php javascript javascript-events

<head><title>STUDENT WISE EXAM BACKLOGS DISPLAY FOR EXAM REGISTRATION</title>

<style type="text/css">
    th {
        font-family:Arial;
        color:black;
        border:1px solid #000;
    }
    thead {
        display:table-header-group;
    }
    tbody {
        display:table-row-group;
    }
    td  {
       border:1px solid #000;   
    }
    </style> 
<script type="text/javascript" >
function check_value(year,sem){

ysem="ys"+year+sem;
var reg=document.registration.regulation.value;
subjectsys="subjects"+year+sem;
amountsys="amount"+year+sem;

if(year==1){
if(sem==1){
var value_list = document.getElementById("ys11").getElementsByTagName('input');
}   
if(sem==2){
var value_list = document.getElementById("ys12").getElementsByTagName('input');
}
  }elseif(year==2){
if(sem==1){
var value_list = document.getElementById("ys21").getElementsByTagName('input');
}   
if(sem==2){
var value_list = document.getElementById("ys22").getElementsByTagName('input');
}
  }elseif(year==3){
if(sem==1){
var value_list = document.getElementById("ys31").getElementsByTagName('input');
}   
if(sem==2){
var value_list = document.getElementById("ys32").getElementsByTagName('input');
}
  }elseif(year==4){
if(sem==1){
var value_list = document.getElementById("ys41").getElementsByTagName('input');
}   
if(sem==2){
var value_list = document.getElementById("ys42").getElementsByTagName('input');
}
  }

  values = 0;
  for (var i=0; i<value_list.length; i++){
if  (value_list[i].checked) {
    values=values+1;
}
  }
  document.getElementById(subjectsys).value=values;
  if (values=="0")
    {
    document.getElementById(amountsys).innerHTML="";
    return;
    }
  if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
  else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
  xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
      document.getElementById(amountsys).innerHTML=xmlhttp.responseText;
      }
    }
  xmlhttp.open("GET","fee.php?year="+year+"&reg="+reg+"&sem="+sem+"&sub="+values,true);
  xmlhttp.send();
  } 
  </script>
     </head>

<form id="registration" name="registration" action=subverify.php method=POST></br></br>    <center> Backlog Subjects for <b>My HtNo</b>
</br></br>
<table border='1'><tr>
<th width='40'>&nbsp;</th><th width='90'>Regulation</th><th width='40'>Year</th>
<th width='40'>Sem</th><th width='350'>Subname</th>
<th width='70'>Internals</th><th width='70'>Externals</th>
</tr><div id="ys41"><tr>
<td width='40'><center><input type="checkbox" name="sub[]" value="344" 
onclick="check_value(4,1)"></center></td>
<td width='90'><center>R07</center></td><td width='40'><center>4</center></td><td     width='40'><center>1</center></td>
<td width='350'>EMBEDDED SYSTEMS</td><td width='70'><center>18</center></td>
<td width='70'><center>17</center></td></tr><tr><td colspan=5 align=right><b>Subjects:     </b><input size=2 type=textbox id=subjects41 name=subjects41 value=0     maxlength=2 readonly=readonly></td>
<td align=right><b>Amount  :</b></td>
<input type='hidden' name='regulation' id=regulationsubjects41 value='R07'>
<td><div id="amount41"><input type="textbox" name="amountval41" value="0" size="5"     maxlength="5" readonly="readonly"></div></td></tr></div><div id="ys42"><tr>
<td width='40'><center><input type="checkbox" name="sub[]" value="527" 
onclick="check_value(4,2)"></center></td>
<td width='90'><center>R07</center></td><td width='40'><center>4</center></td><td     width='40'><center>2</center></td>
<td width='350'>DESIGN PATTERNS</td><td width='70'><center>12</center></td>
<td width='70'><center>14</center></td></tr><tr><td colspan=5 align=right><b>Subjects:     </b><input size=2 type=textbox id=subjects42 name=subjects42 value=0     maxlength=2 readonly=readonly></td>
<td align=right><b>Amount  :</b></td>
<input type='hidden' name='regulation' id=regulationsubjects42 value='R07'>
<td><div id="amount42"><input type="textbox" name="amountval42" value="0" size="5"     maxlength="5" readonly="readonly"></div></td></tr></div><tr><td colspan=7><center><b><div     id="maintotal"><input type="textbox" name="maintotal" value="0" size="5"     maxlength="5" readonly="readonly"></div></center></b></td></tr><tr></tr></table></br></br>    <center><input type='hidden' name='htno' value='08KN1A1219'>
<input type='submit' value='Register'></center></form></br>

这是使用表单中的动态数据的php文件的输出 我想只计算checkboxes标记中的<div>,并且必须在主题<div>标记中显示,如subjects41subjects42,任何人都可以帮忙我更新这个javascript它传递了一些显示费用的ajax请求

6 个答案:

答案 0 :(得分:1)

$("input[type=checkbox]:checked").length

答案 1 :(得分:0)

你可以使用像这样的简单jquery

var count=0;
$("input[type=checkbox]").each(function(){
if(this.is(":checked")){
count+=1;
}
})

alert(count);

答案 2 :(得分:0)

使用jQuery,

var ids = $('input[name="nameofcheckbox[]"]:checked')
                    .map(function(){
                                  return this.value;
                   }).get();

答案 3 :(得分:0)

没有Jquery:

var div = document.getElementById("ys41");
var checkboxes = [];

function getCheckBoxes(el) {
    //check this is an element
    if (el.nodeType == 1) {
        var i = 0;

        //get the children
        var elements = el.childNodes;

        // Loop through children
        while (typeof elements[i] !== 'undefined') {

            //check this is an element
            if (elements[i].nodeType == 1) {
                // If the type is checkbox add it to the array
                if (elements[i].getAttribute('type') == 'checkbox') {
                    checkboxes[checkboxes.length] = elements[i];
                }
                // Otherwise recurse
                else {
                    if (elements[i].childNodes.length > 0) {
                        getCheckBoxes(elements[i]);
                    }
                }
            }
            i++;
        }
    }
}

getCheckBoxes(div);

警告:我现在没有时间检查这是否有效;)。如果它没有评论,我今晚会纠正。

答案 4 :(得分:0)

因为你想用javascript做到这一点,

<FORM>
<INPUT TYPE=checkbox NAME="chkboxarray" VALUE="1"><br>
<INPUT TYPE=checkbox NAME="chkboxarray" VALUE="2"><br>
<INPUT TYPE=checkbox NAME="chkboxarray" VALUE="3"><br>
<INPUT TYPE=button NAME="CheckAll" VALUE="checkbox count" onClick="modify_boxes()">
</FORM>​

function modify_boxes(){
    var total_boxes = document.forms[0].chkboxarray.length;
    var count =0;
    for ( i=0 ; i < total_boxes ; i++ ){
     if (document.forms[0].chkboxarray[i].checked ==true)
     count++;        
    }   
 alert(count);        
}​​​​ 

工作Demo

答案 5 :(得分:-1)

你走了,这就是你问的问题:)

var i=0;
var checks= 0;
divelem = document.getElementById("divelem");
  while(i < divelem.childNodes.length){
  if( divelem.childNodes[i].nodeType != 3         //not empty space
      && divelem.childNodes[i].getAttribute('type') == 'checkbox' //is checkbox? 
      && divelem.childNodes[i].checked ){                         // is checked?
            checks++;
     }
      i++;  
 }
alert("no of checkboxes checked in div are: "+checks);

我更喜欢你在php本身。

<强>更新 这是完整的代码,我确定它正在运行。它提供了在所有div元素中检查的所有复选框。请检查。

<html>
<div >
1.<input type="checkbox" value="check1" / ></br>
2.<input type="checkbox" value="check2" / ></br>
3.<input type="checkbox" value="check3" / ></br>
</div>
<div >
4.<input type="checkbox" value="check4" / ></br>
5.<input type="checkbox" value="check5" / ></br>
</div>
<input type="button" value="count check" onclick="check()"> 
<script>
function check(){ //function can count checkboxes for all div elements in document

var checks= 0;
var divelems = document.getElementsByTagName('div');
for(no=0;no<divelems.length;no++){
  var i=0;
    while(i < divelems[no].childNodes.length){
    if( divelems[no].childNodes[i].nodeType != 3         //not empty space
    && divelems[no].childNodes[i].getAttribute('type') == 'checkbox' //is checkbox? 
    && divelems[no].childNodes[i].checked ){                         // is checked?
      checks++;
        }
     i++;  
    }
 }
alert("no of checkboxes checked inside div are: "+checks);
}
</script>
</html>

<强> UPDATE2: 请立即查看

<html>
<script>
    function check(div){ //function can count checkboxes for divs elements that is passed in as argument

var checks= 0;
var divelem = document.getElementById(div);
var i=0;
while(i < divelem.childNodes.length){
if( divelem.childNodes[i].nodeType != 3         //not empty space
&& divelem.childNodes[i].getAttribute('type') == 'checkbox' //is checkbox? 
&& divelem.childNodes[i].checked ){                         // is checked?
  checks++;
    }
 i++;  
}

alert("no of checkboxes checked inside "+div+" are: "+checks);
}
</script>
<div id="div1" >
1.<input type="checkbox" value="check1" / ></br>
2.<input type="checkbox" value="check2" / ></br>
3.<input type="checkbox" value="check3" / ></br>
<input type="button" value="count check div1" onclick="check('div1')"> 
</div>
<div id="div2" >
4.<input type="checkbox" value="check4" / ></br>
5.<input type="checkbox" value="check5" / ></br>
</div>
<input type="button" value="count check div2 " onclick="check('div2')"> 
</html>