87,997
社区成员
发帖
与我相关
我的任务
分享DIV中的checkbox 增加onclick 怎么不管用呢？
各位大大好，本人是JS小白，因为我的网页需要涉及到一个价格的运算，在网上找了一个JS监测checkbox 值并计算价格的代码，就拿来用了，因为需要美化checkbox ，所以用了jquery的一个插件，该插件的样式比较符合我网页的要求，但是该样式需要在每一个checkbox 的外部套一个DIV ，代码如下：
JS的代码（计算价格的代码）如下：
现在的情况是，不增加checkbox的DIV，也就是不用美化插件，价格是能正常运算的，但是增加了这个DIV的层，JS 就不管用了，请问各位大大：
怎么修改该JS代码，才能保证JS可以计算价格呢？
<?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可以计算价格呢？
...全文
请发表友善的回复…
发表回复
杉之忆 2013-02-21
- 打赏
- 举报
谢谢 现在确定是冲突了
杉之忆 2013-02-02
- 打赏
- 举报
你好，非常感谢你的帮助，我实验了您给的代码，确实可以使用，但是只要一加入我下载的表单美化插件和美化的JS 就无法使用了，那这样是不是就肯定了，是美化插件的JS 和该计算价格的JS 有冲突？
fzfei2 2013-02-02
- 打赏
- 举报
我写个简单静态页例子，希望对你有帮助
<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>
杉之忆 2013-02-02
- 打赏
- 举报
你好，感谢您的帮助，但是我这边测试的结果是，无论外层的ID 与input.id相同与否，都不能正常运行计算，删除外层的ID 也是一样的情况，难道只能删除外层DIV，不美化？
杉之忆 2013-02-02
- 打赏
- 举报
你好，感谢您的帮助，但是我这边测试的结果是，无论外层的ID 相同与否，都不能正常运行计算，删除外层的ID 也是一样的情况，难道只能删除外层DIV，不美化？
fzfei2 2013-02-02
- 打赏
- 举报
<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 对应错了
杉之忆 2013-02-02
- 打赏
- 举报
你好第2种方法是可以正常运行的，但是因为需要美化checkbox，所以必须使用外层DIV
所以，您所说的第一种方法可否详细一些呢？
杉之忆 2013-02-02
- 打赏
- 举报
你好，感谢您的解答，但是我这边实际本地测试的时候，只要加上了外层的DIV，就不能计算了，FF测试了，也没有报错
lvzg_005 2013-02-02
- 打赏
- 举报
onclick="javascript:shops(this)"
1、打个断点测试shops脚本在美化之后能够进去？（ff下firebug调试）
lz测试下这个this变量在美化前后是否有改变，如果指向的不同的对象，就是美化的js有冲突。
fzfei2 2013-02-02
- 打赏
- 举报
应该你最终显示的 checkbox不是原来的checkbox，所以点击就不会触事件了
你看下这美化插件具体使用AIP吧
caikeqiang168 2013-02-01
- 打赏
- 举报
按两种思路去调试
1.function shops(o){
alert(123);//看事件方法有没有响应
}
2.把外层div的checkbox样式去掉，看看事件能否响应
bbjbepzz 2013-02-01
- 打赏
- 举报
运行了一下你的代码没有问题，LZ看下是不是其它地方出问题。或者用google或者firefox看下控制台有没有错误信息。
fzfei2 2013-02-01
- 打赏
- 举报
<div class="checkbox" id="<?php echo $row['id']; ?>">
id改成与checkbox的不一样
<div class="checkbox" id="div<?php echo $row['id']; ?>">
ddgx 2013-02-01
- 打赏
- 举报
没看到你绑定click事件的代码
