check 单击特效，怎么做

我想让check 鼠标选中了，会在一个<td>10</td>  变成<td>27.77</td> check 控件值是17.77，如何做啊 ，就是让们相加

解决方案 »

  1.   

    首先你的10要放在DIV里面，点击checkbox 用onclick事件 然后获取div和checkbox的值 进行换算后在赋值给div就可以了。
      

  2.   


    <input type="checkbox" onclick="chk()"/>17.77
    <table id="ta">
    <tr><td>8</td><td>10</td></tr>
    <tr><td>9</td><td>11</td></tr>
    </table>function chk()
    {
     var ta=document.getElementById("ta");
       var num=parseFloat(ta.rows[0].cells[1].innerHTML);//字符串转换为数字，
      num=num+17.77;
    ta.rows[0].cells[1].innerHTML=num;
    }
      

  3.   

    input type="checkbox" onclick="chk()"/>17.77不是这个吧 应该是控件选中状态是加，如果点击取消选中就应该减了
      

  4.   

    function chk()
    {
     var ta=document.getElementById("ta");
       var num=parseFloat(ta.rows[0].cells[1].innerHTML);//字符串转换为数字，
      num=num+17.77;
    ta.rows[0].cells[1].innerHTML=num;
    }
      

  5.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    function show()
    {
    var a = document.getElementById("div1");
    var b = document.getElementById("chek");
    a.innerText = parseFloat(b.value) + parseFloat(a.value);
    //alert(a.value);
    }
      //-->
      </SCRIPT>
     </HEAD> <BODY>
      <input type="checkbox" id="chek" value="17.7" onclick="show()">
      <table>
    <tr>
    <td><div id="div1" value="10">10</div></td>
    </tr>
      </table>
     </BODY>
    </HTML>
      

  6.   

    我写了个小例子，你参考一下吧。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>测试</title>
    <script language="javascript">
    <!--
    var $ = document.getElementById; function add(obj){
    var sum = $("sum").innerText;
    if(sum == "") sum=0;
    else sum = parseFloat(sum);
    if(obj.checked == true) sum+=parseFloat(obj.value);//如果选定则加
    else sum-=parseFloat(obj.value);//如果取消则减
    sum = Math.round(sum*100)/100; //四舍五入到0.01，防止因为使用浮点数出现的误差
    $("sum").innerText = sum;
    }
    //-->
    </script>
    </head>
    <body>
    <div>
    总计：<span id="sum">0</span>
    </div>
    <div>
    <input onclick="add(this)" id="staff1" type="checkbox" value="12.23" /><label for="staff1">物品1</label><br />
    <input onclick="add(this)" id="staff2" type="checkbox" value="34.23" /><label for="staff2">物品2</label><br />
    <input onclick="add(this)" id="staff3" type="checkbox" value="456.76" /><label for="staff3">物品3</label><br />
    <input onclick="add(this)" id="staff4" type="checkbox" value="112" /><label for="staff4">物品4</label><br />
    <input onclick="add(this)" id="staff5" type="checkbox" value="232.00" /><label for="staff5">物品5</label><br />
    <input onclick="add(this)" id="staff6" type="checkbox" value="2345" /><label for="staff6">物品6</label>
    </div>
    </body>
    </html>
      

  7.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script>
    var getPosition = (function(){
        var p=-1;
        return function(){
             p+=1;
           return "background-position:0 "+(p*16)+"px;";
        }
    })();
    jQuery(function(){
        jQuery("a").each(function(){
            jQuery(this).attr("style",getPosition());    
        });
    });  
      </script>
         
     
       </HEAD> <BODY>
     
     <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
     
     </BODY>
    </HTML>
      

  8.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script>
    var getPosition = (function(){
        var p=-1;
        return function(){
             p+=1;
           return "background-position:0 "+(p*16)+"px;";
        }
    })();
    jQuery(function(){
        jQuery("a").each(function(){
            jQuery(this).attr("style",getPosition());    
        });
    });  
      </script>
         
     
       </HEAD> <BODY>
     
     <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
     
     </BODY>
    </HTML>
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script>
    var getPosition = (function(){
        var p=-1;
        return function(){
             p+=1;
           return "background-position:0 "+(p*16)+"px;";
        }
    })();
    jQuery(function(){
        jQuery("a").each(function(){
            jQuery(this).attr("style",getPosition());    
        });
    });  
      </script>
         
     
       </HEAD> <BODY>
     
     <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
      <a href="#">sss</a>
     
     </BODY>
    </HTML>
      

  10.   

    写的都对 不会有一点问题啊 <input onclick="add(this)" id="staff1" type="checkbox" value="手机|12.23" /><label for="staff1">物品1</label><br />
            <input onclick="add(this)" id="staff2" type="checkbox" value="mp3|34.23" /><label for="staff2">物品2</label><br />
    javascript 需要分割一下吧控件的值是 以|分割 怎么写啊
      

  11.   

    <input onclick="add(this)" id="staff1" type="checkbox" value="手机|12.23" /><label for="staff1">物品1</label><br />
            <input onclick="add(this)" id="staff2" type="checkbox" value="mp3|34.23" /><label for="staff2">物品2</label><br /><script type="text/javascript">
    function add(o){
    var os = o.value.split("|");
    for(var i=0;i<os.length;i++)   
    alert(os[i]);
    }
    </script>
      

  12.   

    用到 javescript 技术 控制表格，谢谢