DIV中的checkbox 增加onclick 怎么不管用呢？

Question

各位大大好，本人是JS小白，因为我的网页需要涉及到一个价格的运算，在网上找了一个JS监测checkbox 值并计算价格的代码，就拿来用了，因为需要美化checkbox ，所以用了jquery的一个插件，该插件的样式比较符合我网页的要求，但是该样式需要在每一个checkbox 的外部套一个DIV ，代码如下：
<?php foreach($rows as $row) { ?>
  <div class="checkbox" id="<?php echo $row['id']; ?>">
     <input name="shop" id="<?php echo $row['id']; ?>" type="checkbox" value="<?php echo $row['menshijiage']; ?>" onclick="javascript:shops(this)" >
     <label for="<?php echo $row['id']; ?>"><?php echo $row['jingdianname']; ?></label> 
   </div>
<?php } ?>JS的代码（计算价格的代码）如下：
        <script type="text/javascript">  
           var sum=0;  
           function shops(o){  
           sum+=parseInt(o.checked?o.value:-o.value);//如果选中就加选中的那个复选框的值，否则就减去
           jingprice=sum+100;//数值为利润
           document.getElementById('gong').innerHTML='共'+jingprice+'元';  
                            }  
         </script>  现在的情况是，不增加checkbox的DIV，也就是不用美化插件，价格是能正常运算的，但是增加了这个DIV的层，JS 就不管用了，请问各位大大：
怎么修改该JS代码，才能保证JS可以计算价格呢？
divjavascriptjqueryinputfunction

Answer 1

没看到你绑定click事件的代码

Answer 2

<div class="checkbox" id="<?php echo $row['id']; ?>">
id改成与checkbox的不一样
<div class="checkbox" id="div<?php echo $row['id']; ?>">

Answer 3

运行了一下你的代码没有问题，LZ看下是不是其它地方出问题。或者用google或者firefox看下控制台有没有错误信息。

Answer 4

按两种思路去调试
 1.function shops(o){
  alert(123);//看事件方法有没有响应
}
 2.把外层div的checkbox样式去掉，看看事件能否响应

Answer 5

你好，感谢您的解答，但是我这边实际本地测试的时候，只要加上了外层的DIV，就不能计算了，FF测试了，也没有报错

Answer 6

你好第2种方法是可以正常运行的，但是因为需要美化checkbox，所以必须使用外层DIV
所以，您所说的第一种方法可否详细一些呢？

Answer 7

<div class="checkbox" id="<?php echo $row['id']; ?>">
<input name="shop" id="<?php echo $row['id']; ?>"
 <label for="<?php echo $row['id']; ?>"
div.id = input.id  =label.for
问题是你把 div 的ID与  input的ID设置成一样了，所以label for 对应错了

Answer 8

你好，感谢您的帮助，但是我这边测试的结果是，无论外层的ID 相同与否，都不能正常运行计算，删除外层的ID 也是一样的情况，难道只能删除外层DIV，不美化？

Answer 9

你好，感谢您的帮助，但是我这边测试的结果是，无论外层的ID 与input.id相同与否，都不能正常运行计算，删除外层的ID 也是一样的情况，难道只能删除外层DIV，不美化？

Answer 10

我写个简单静态页例子，希望对你有帮助   <div class="checkbox" id="d1">
     <input name="shop" id="v1" type="checkbox" value="1" onclick="javascript:shops(this)" >
     <label for="v1">aaaa</label> 
   </div>
   
   <div class="checkbox" id="d2">
     <input name="shop" id="v2" type="checkbox" value="1" onclick="javascript:shops(this)" >
     <label for="v2">bbbb</label> 
   </div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
           var sum=0;  
           function shops(o){  
           sum+=parseInt(o.checked?o.value:-o.value);//如果选中就加选中的那个复选框的值，否则就减去
           jingprice=sum+100;//数值为利润
           //document.getElementById('gong').innerHTML='共'+jingprice+'元';  
           alert( jingprice );
            }  
</script>

Answer 11

你好，非常感谢你的帮助，我实验了您给的代码，确实可以使用，但是只要一加入我下载的表单美化插件和美化的JS 就无法使用了，那这样是不是就肯定了，是美化插件的JS 和该计算价格的JS 有冲突？

Answer 12

应该你最终显示的 checkbox不是原来的checkbox，所以点击就不会触事件了
你看下这美化插件具体使用AIP吧

Answer 13

onclick="javascript:shops(this)" 
1、打个断点测试shops脚本在美化之后能够进去？（ff下firebug调试）
lz测试下这个this变量在美化前后是否有改变，如果指向的不同的对象，就是美化的js有冲突。