我加了一个鼠标事件,就是当鼠标在<tr>内时候选中复选框但是当我鼠标点击那个复选框的时候为什么无法选中呢?<html>
<head>
<script type="text/javascript">
// 产品管理鼠标事件
var productMouseDown = function(id)
{
if (document.getElementById('price_' + id).checked == false) {
document.getElementById('price_' + id).checked = true;
}
}
</script>
</head>
<body>
<table>
         <tr onmousedown="return productMouseDown(1)">
         <td width="150">
         ¥<input type="checkbox" value="" class="w50" id="price_1">
         <span class="manage-p-t">10-01-18</span>
         </td>
         <td width="150">
ddddddddd
         </td>
        </tr>
         <tr onmousedown="return productMouseDown(2)">
         <td width="150">
         ¥<input type="checkbox" value="" class="w50" id="price_2">
         <span class="manage-p-t">10-01-18</span>
         </td>
         <td width="150">
ddddddddd
         </td>
        </tr>
        <tr onmousedown="return productMouseDown(3)">
         <td width="150">
         ¥<input type="checkbox" value="" class="w50" id="price_3">
         <span class="manage-p-t">10-01-18</span>
         </td>
         <td width="150">
ddddddddd
         </td>
        </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    给checkbox也加一个onclick吧。    <script type="text/javascript"> 
    // 产品管理鼠标事件
            var productMouseDown = function(id) {
                var chk = document.getElementById('price_' + id);
                chk.checked = !chk.checked;
            }
        </script>
    <input type="checkbox" value="" class="w50" id="price_1" onclick="productMouseDown(1);" >
      

  2.   

    因为你这个复选框也是在这个TR上
    所以你点击复选框,把复选框改变
    但同时调用了TR上的那个函数
    所以就等于没有改变
      

  3.   

    正解,可以这样写
    <html>
    <head>
    <script type="text/javascript">
    // 产品管理鼠标事件
    var productMouseDown = function(id)
    {
    if (document.getElementById('price_' + id).checked == false) {
    document.getElementById('price_' + id).checked = true;
    }
    }
    </script>
    </head>
    <body>
    <table>
            <tr>
            <td width="150">
            ¥ <input type="checkbox" value="" class="w50" id="price_1">
            
            </td>
            <td width="150" onmousedown="return productMouseDown(1)"><span class="manage-p-t">10-01-18 </span>
    ddddddddd
            </td>
            </tr>
    </table>
    </body>
    </html>
      

  4.   

    因为当触发鼠标事件的时候,tr和其子控件CheckBox同时都触发了mousedown事件,在tr中虽然设置为了选中状态,但是在checkbox中又被修改回去了。你可以看下javascript事件的冒泡机制,然后根据你的需求在来实现。举例,如果你在checkbox中加入如下代码,
    onmousedown="event.cancelBubble = true;"
    此时,便不会触发tr的checkbox的事件。
      

  5.   


    var productMouseDown = function(id) 

    if (document.getElementById('price_' + id).checked == false) { 
    document.getElementById('price_' + id).checked = true; 

    } 可是我这个函数有判断啊,当复选框没有选择的时候才去选择就是我去点那个复选框,不管属于谁的子集,都不应该出现选不上的情况的说?很意外的是,我在这个函数里加一个alert,就没有烦恼了?var productMouseDown = function(id) 

    alert(1);
    if (document.getElementById('price_' + id).checked == false) { 
    document.getElementById('price_' + id).checked = true; 

      

  6.   


    我明白了,实际上是先发生的tr上的onmousedown事件,然后我去点复选框,结果复选框被修改回去了
      

  7.   

    这样也可以
    <html>
    <head>
    </head>
    <body>
    <table>
            <tr>
            <td width="150">
            <input type="checkbox" value="" class="w50" id="price_1"><label for="price_1">sadasdasdasdsadasdas</label>
            </td>
            </tr>
    </table>
    </body>
    </html>