注册 登录
编程论坛 → JavaScript论坛

javascript通过多个单选实现计价，求大佬指点一下，这玩意没效果

lxf376376 发布于 2020-06-08 13:32， 2019 次点击
程序代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第二次实验</title>
    <link rel="stylesheet" href="CSS/style2.css">
    <script>
function displayResult(){
     var a=parseint(document.getElementsByName("cpu").value);
    var b=parseint(document.getElementsByName("nc").value);
    var c=parseint(document.getElementsByName("yp").value);
    var d=parseint(document.getElementsByName("zb").value);
    var e=parseint(document.getElementsByName("xk").value);
    var f=parseint(document.getElementsByName("jx").value);
    document.getElementById("jg").value=(a+b+c+d+e+f)
}
    </script>
</head>

<body>
    <main class="form">
     <h3>个人电脑diy配置成本核算</h3>
       <p>本计算仅提供参考<br>具体价格将随市场波动</p>
        <form  method="get">
          <fieldset>
            <legend>CPU</legend>
              <input type="radio" id="cpu_1" name="cpu" onclick="displayResult(this.value)" value="1149">Intel 酷睿i5 9代
              <input type="radio" id="cpu_2" name="cpu" onclick="displayResult(this.value)" value="3299">Intel 酷睿i7 10代
              <input type="radio" id="cpu_3" name="cpu" onclick="displayResult(this.value)" value="4299">Intel 酷睿i9 10代
              <input type="radio" id="cpu_4" name="cpu" onclick="displayResult(this.value)" value="3689">AMD Ryzen 9
         </fieldset>
           

         <fieldset>
         <legend>内存</legend>
           <input type="radio" id="nc_1" name="nc" onclick="displayResult(this.value)" value="459">金士顿(Kingston) DDR4 2666 16GB
             &nbsp;&nbsp;&nbsp;
           <input type="radio" id="nc_2" name="nc" onclick="displayResult(this.value)" value="1149">金士顿(Kingston) DDR4 3200 32GB<br>
           <input type="radio" id="nc_3" name="nc" onclick="displayResult(this.value)" value="529">海盗船(USCORSAIR)DDR4 3200 16GB   

           <input type="radio" id="nc_4" name="nc" onclick="displayResult(this.value)" value="1149">海盗船(USCORSAIR)DDR4 3200 32GB
        </fieldset>
        <fieldset>
             <legend>硬盘</legend>
           <input type="radio" id="yp_1" name="yp" onclick="displayResult(this.value)" value="389">希捷BarraCuda（ST2000DM008）2TB
           <input type="radio" id="yp_2" name="yp" onclick="displayResult(this.value)" value="649">希捷BarraCuda（ST4000DM004）4TB<br>
           <input type="radio" id="yp_3" name="yp" onclick="displayResult(this.value)" value="1799">希捷BarraCuda（ST8000DM004）8TB
           <input type="radio" id="yp_4" name="yp" onclick="displayResult(this.value)" value="4399">希捷银河Exos X16（ST16000NM002G）16TB
        </fieldset>
        <fieldset>
             <legend>主板</legend>
           <input type="radio" id="zb_1" name="zb" onclick="displayResult(this.value)" value="699">华硕 B360
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="zb_2" name="zb" onclick="displayResult(this.value)" value="769">微星B450M MORTAR MAX<br>
           <input type="radio" id="zb_3" name="zb" onclick="displayResult(this.value)" value="1299">技嘉Z370 HD3
           <input type="radio" id="zb_4" name="zb" onclick="displayResult(this.value)" value="1899">七彩虹iGame Z490 Vulcan X V20
        </fieldset>
        <fieldset>
             <legend>显卡</legend>
           <input type="radio" id="xk_1" name="xk" onclick="displayResult(this.value)" value="899">影驰GeForce GTX 1050Ti大将&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="xk_2" name="xk" onclick="displayResult(this.value)" value="3299">丽台Quadro M2000<br>
           <input type="radio" id="xk_3" name="xk" onclick="displayResult(this.value)" value="8999">七彩虹iGame GeForce RTX 2080 Ti
           <input type="radio" id="xk_4" name="xk" onclick="displayResult(this.value)" value="29999">华硕ROG-MATRIX-RTX2080Ti-P11G-GAMING
        </fieldset>
        <fieldset>
             <legend>机箱</legend>
           <input type="radio" id="jx_1" name="jx" onclick="displayResult(this.value)" value="239">先马黑洞7
           <input type="radio" id="jx_2" name="jx" onclick="displayResult(this.value)" value="700">酷冷至尊MasterCase H500P
           <input type="radio" id="jx_3" name="jx" onclick="displayResult(this.value)" value="1999">骨伽征服者
           <input type="radio" id="jx_4" name="jx" onclick="displayResult(this.value)" value="6999">Phanteks追风者
        </fieldset>
            <p><button type="button" onclick="displayResult()">查看价格</button><input type="text" id="jg"></p>
      </form>
    </main>
</body>
</html>







1 回复
#2
leeqihero2020-06-26 19:22
程序代码：
<html>
<head>
<meta charset=utf-8/>
</head>

<body>
    <main class="form">
     <h3>个人电脑diy配置成本核算</h3>
       <p>本计算仅提供参考<br>具体价格将随市场波动</p>
        <form  method="get">
          <fieldset>
            <legend>CPU</legend>
              <input type="radio" id="cpu_1" name="cpu" value="1149">Intel 酷睿i5 9代
              <input type="radio" id="cpu_2" name="cpu" value="3299">Intel 酷睿i7 10代
              <input type="radio" id="cpu_3" name="cpu" value="4299">Intel 酷睿i9 10代
              <input type="radio" id="cpu_4" name="cpu" value="3689">AMD Ryzen 9
         </fieldset>
           

         <fieldset>
         <legend>内存</legend>
           <input type="radio" id="nc_1" name="nc" value="459">金士顿(Kingston) DDR4 2666 16GB
             &nbsp;&nbsp;&nbsp;
           <input type="radio" id="nc_2" name="nc" value="1149">金士顿(Kingston) DDR4 3200 32GB<br>
           <input type="radio" id="nc_3" name="nc" value="529">海盗船(USCORSAIR)DDR4 3200 16GB   

           <input type="radio" id="nc_4" name="nc" value="1149">海盗船(USCORSAIR)DDR4 3200 32GB
        </fieldset>
        <fieldset>
             <legend>硬盘</legend>
           <input type="radio" id="yp_1" name="yp" value="389">希捷BarraCuda（ST2000DM008）2TB
           <input type="radio" id="yp_2" name="yp" value="649">希捷BarraCuda（ST4000DM004）4TB<br>
           <input type="radio" id="yp_3" name="yp" value="1799">希捷BarraCuda（ST8000DM004）8TB
           <input type="radio" id="yp_4" name="yp" value="4399">希捷银河Exos X16（ST16000NM002G）16TB
        </fieldset>
        <fieldset>
             <legend>主板</legend>
           <input type="radio" id="zb_1" name="zb" value="699">华硕 B360
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="zb_2" name="zb" value="769">微星B450M MORTAR MAX<br>
           <input type="radio" id="zb_3" name="zb" value="1299">技嘉Z370 HD3
           <input type="radio" id="zb_4" name="zb" value="1899">七彩虹iGame Z490 Vulcan X V20
        </fieldset>
        <fieldset>
             <legend>显卡</legend>
           <input type="radio" id="xk_1" name="xk" value="899">影驰GeForce GTX 1050Ti大将&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="xk_2" name="xk" value="3299">丽台Quadro M2000<br>
           <input type="radio" id="xk_3" name="xk" value="8999">七彩虹iGame GeForce RTX 2080 Ti
           <input type="radio" id="xk_4" name="xk" value="29999">华硕ROG-MATRIX-RTX2080Ti-P11G-GAMING
        </fieldset>
        <fieldset>
             <legend>机箱</legend>
           <input type="radio" id="jx_1" name="jx" value="239">先马黑洞7
           <input type="radio" id="jx_2" name="jx" value="700">酷冷至尊MasterCase H500P
           <input type="radio" id="jx_3" name="jx" value="1999">骨伽征服者
           <input type="radio" id="jx_4" name="jx" value="6999">Phanteks追风者
        </fieldset>
            总价格<p id=jg></p>
            <p><button type="button" onclick="location.href=location.href">刷新页面</button></p>
      </form>
    </main>
</body>
<script>
V=document.querySelectorAll('[type=radio]')
V.forEach(c=>c.addEventListener('click', function(){
    document.getElementById("jg").innerHTML=[...V].reduce((p,c)=>c.checked?p+c.value*1:p,0);
}));
</script>
</html>
1
©2025, BC-CN.NET
电脑版