当前位置: 代码迷 >> JavaScript >> js 怎么分别得到复选框选中某行的某值
  详细解决方案

js 怎么分别得到复选框选中某行的某值

热度:118   发布时间:2012-04-18 15:01:59.0
js 如何分别得到复选框选中某行的某值
<script type="text/javascript">
function sellClick(sId){
var pri ="";
var cb = document.getElementsByName("all");
var sid = document.getElementById("bb"+sId).innerHTML;
  for(i=0;i<cb.length;i++){
if(cb[i].checked){
pri +=sid+("/");
}
}
alert(pri);
}
</script>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#c1ebff">
  <tr style="background-color:#D1EEEE;">
<td width="3%" height="22"></td>
<td width="25%">商品</td>
<td width="8%">单价</td>
  <td width="1%"></td>
<td width="5%">数量</td>
  <td width="1%"></td>
<td width="8%">金额</td>
<td width="8%">基本操作</td>
  </tr>
  <tr>
  <td height="20"><input type="checkbox" name="all" onclick="sellClick('1')"/></td>
  <td>诺基亚</td>
  <td><input type="text" name="price" id="price" value="3000.00" /></td>
  <td>×</td>
<td><input type="text" name="quantity" id="quantity" value="2"/></td>
  <td>=</td>
<td><span id="bb1" style="color: #FFB90F;font-weight: bold;">6000.00</span></td>
  </tr>
  <tr>
  <td height="20"><input type="checkbox" name="all" onclick="sellClick('2')"/></td>
  <td>三星</td>
  <td><input type="text" name="price" id="price" value="2500"/></td>
  <td>×</td>
<td><input type="text" name="quantity" id="quantity" value="2"/></td>
  <td>=</td>
<td><span id="bb2" style="color: #FFB90F;font-weight: bold;">5000.00</span></td>
  </tr>
</table>


这个js的运行的结果是 当我复选框选中第一行的时候 它得到的是id为“bb1”的值为6000.00/,然后我再选中第二行的时候,它就是循环了两次 得到的是id为“bb2”的值为5000.00/5000.00/。
而我想要得结果是: 当我选中第一个复选框的时候 得到id为“bb1”的值为6000.00/,然后我复选框再选中第二行的时候,得到的id为“bb1”和“bb2”的值为6000.00/2500.00/
望大家帮帮忙 在这里先谢谢各位了。

------解决方案--------------------
HTML code

<script type="text/javascript">
function sellClick(){
    var cb = document.getElementsByName("all");
    var ids = "", ps = "";
    for (var i = 0, len = cb.length;i < len; i++) {
        if (cb[i].checked){
            ids += 'bb' + cb[i].value + ',';
            ps += document.getElementById('bb' + cb[i].value).innerHTML + '/';
        }
    }
    alert(ids + ' : ' + ps);
}
</script>

<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#c1ebff">
  <tr style="background-color:#D1EEEE;">
<td width="3%" height="22"></td>
<td width="25%">商品</td>
<td width="8%">单价</td>
  <td width="1%"></td>
<td width="5%">数量</td>
  <td width="1%"></td>
<td width="8%">金额</td>
<td width="8%">基本操作</td>
  </tr>
  <tr>
  <td height="20"><input type="checkbox" name="all" value="1" onclick="sellClick()"/></td>
  <td>诺基亚</td>
  <td><input type="text" name="price" id="price" value="3000.00" /></td>
  <td>×</td>
<td><input type="text" name="quantity" id="quantity" value="2"/></td>
  <td>=</td>
<td><span id="bb1" style="color: #FFB90F;font-weight: bold;">6000.00</span></td>
  </tr>
  <tr>
  <td height="20"><input type="checkbox" name="all" value="2" onclick="sellClick()"/></td>
  <td>三星</td>
  <td><input type="text" name="price" id="price" value="2500"/></td>
  <td>×</td>
<td><input type="text" name="quantity" id="quantity" value="2"/></td>
  <td>=</td>
<td><span id="bb2" style="color: #FFB90F;font-weight: bold;">5000.00</span></td>
  </tr>
</table> 
  相关解决方案