怎么通过复选框选择多行，并且提示所选的行数？

Question

<input name="c1" type="checkbox" value="" onClick="window.location.href('qq.jsp?addone=1')"/> AAAAAAAA
<br />
<input name="c2" type="checkbox" value="" onClick="window.location.href('qq.jsp?addone=1')"/> BBBBBBBB
<br />
<input name="c3" type="checkbox" value="" onClick="window.location.href('qq.jsp?addone=1')"/> CCCCCCCC我想当选中一行后，提示“选择了1行”，选择两行后提示“选择了两行”，并且选中某行，它的颜色变为红色该怎么实现呢？

Answer 1

name必须相同
js里取到数组循环判断有几个被选了checked
然后再把被选的做你想要的操作

Answer 2

楼主，你的onclick事件写的是重新刷新本页，那你说的这些效果是在跳转之前还是之后？

Answer 3

这要name相同或者id相同，通过document.getElementsByName("someName")或者document.getElementbyId("someId")得到他们的对象，被选中的就是标签里就是checked

Answer 4

var list=document.getElementByTagName("checkbox");
for(int i=0;i<list.length();i++){
  if (list[i].checked==true){
       alert(i+"行被选中了");
   }
}

Answer 5

document.getElementByTagName("checkbox") 是把所有的 checkbox 都选了。如果是只需要一部分呢？可以把某些 checkbox 的 ID 放到一个array 里，用时，for loop 一下，把选上的加总就可以了。

Answer 6

我的意思是每选中一行，它在下面就立刻进行提示选中1行，如果选中了2行，就在下面立刻提示选中两行，而不是在提交的时候alert你选了几行

Answer 7

<script type="text/javascript">
var checkedSum = 0;
function checkSelection(chk){
    if(chk.checked==true){
        checkedSum++;
        chk.nextSibling.style.color='red';
        alert("您已经选择"+checkedSum+"行");
    } else {
        checkedSum--;
        chk.nextSibling.style.color='black';
    }
    
}
</script>
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>AAAAAAAA</label>
<br />
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>BBBBBBBB</label>
<br />
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>CCCCCCCC</label>
<br />
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>DDDDDDDD</label>
<br />
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>EEEEEEEE</label>
<br />
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>FFFFFFFF</label>
------------------------------------------------------
<label>必须要加，也可以换成<span>、<div>、<font>等

Answer 8

<script type="text/javascript"> 
var checkedSum = 0; 
function checkSelection(chk){ 
    if(chk.checked==true){ 
        checkedSum++; 
        chk.nextSibling.style.color='red'; 
        alert("您已经选择"+checkedSum+"行"); 
    } else { 
        checkedSum--; 
        chk.nextSibling.style.color='black'; 
    } 
    
} 
</script> 
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>AAAAAAAA</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>BBBBBBBB</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>CCCCCCCC</label> 
<br /> 
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>DDDDDDDD</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>EEEEEEEE</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>FFFFFFFF</label>

Answer 9

<script type="text/javascript"> 
var checkedSum = 0; 
function checkSelection(chk){ 
    if(chk.checked==true){ 
        checkedSum++; 
        chk.nextSibling.style.color='red'; 
        alert("您已经选择"+checkedSum+"行"); 
    } else { 
        checkedSum--; 
        chk.nextSibling.style.color='black'; 
    } 
    
} 
</script> 
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>AAAAAAAA</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>BBBBBBBB</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>CCCCCCCC</label> 
<br /> 
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>DDDDDDDD</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>EEEEEEEE</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>FFFFFFFF</label>
----------------------------------------------------
红色部分不能有空格

Answer 10

谢谢，你的提示非常正确，之间不能有空格，我之前是由于有空格才出现错误的。
请您指教一下，为何有空格就不行，而它们之间必须无空格呢？
还有一个问题：如果不是用alert提示用户选了几行，而是在页面中提示用户，该怎么办呢

Answer 11

噢，我明白为什么不能有空格了。
原来是，nextSibling
如果设置它的父标签的style，用什么呢？parent？

Answer 12

<script type="text/javascript" language="javascript"> 
var checkedSum = 0; 
function checkSelection(chk){ 
    if(chk.checked==true){ 
        checkedSum++; 
        chk.parentNode.parentNode.style.background='#66CC00'; 
document.getElementById("tip").innetText="你已经选择了" + checkedSum + "行";
    } else { 
        checkedSum--; 
        chk.parentNode.parentNode.style.background='white';
        document.getElementById("tip").innetText="你已经选择了" + checkedSum + "行";
    } 
    
} 
</script> 其中<label id="tip"></label>
可是label中没有显示，不知道什么原因

Answer 13

<script type="text/javascript" language="javascript"> 
var checkedSum = 0; 
function checkSelection(chk){ 
    if(chk.checked==true){ 
        checkedSum++; 
        chk.nextSibling.style.background='#66CC00'; 
        document.getElementById("tip").innerHTML="你已经选择了" + checkedSum + "行";
    } else { 
        checkedSum--; 
        chk.nextSibling.style.background='#FFFFFF';
        if(checkedSum>0){
            document.getElementById("tip").innerHTML="你已经选择了" + checkedSum + "行";
        }else{
            document.getElementById("tip").innerHTML="你现在没有选择任何项";
        }
    } 
    
} 
</script>
<div id="tip"></div>
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>AAAAAAAA</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>BBBBBBBB</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>CCCCCCCC</label> 
<br /> 
<input name="c1" type="checkbox" value="" onClick="checkSelection(this)"/><label>DDDDDDDD</label> 
<br /> 
<input name="c2" type="checkbox" value="" onClick="checkSelection(this)"/><label>EEEEEEEE</label> 
<br /> 
<input name="c3" type="checkbox" value="" onClick="checkSelection(this)"/><label>FFFFFFFF</label>