html 用js 多选计算？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 用js 多选计算？相关的知识，希望对你有一定的参考价值。

请问如何用html+js实现多选的联动计算呢?
<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value="" />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 3元</label>
</form>

比如我勾选了苹果跟香蕉，就会显示出16元，自动计算了，或者添加个“显示价格”“按钮也行，我只想让用户，选择后显示出来价格就行，如何形式显示无所谓的，谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id="fruits" action="" method="get">
    您喜欢的水果？<br /><br />
    <label><input name="Fruit" type="checkbox" value="" />苹果 10元</label>
    <label><input name="Fruit" type="checkbox" value="" />桃子5元 </label>
    <label><input name="Fruit" type="checkbox" value="" />香蕉6元 </label>
    <label><input name="Fruit" type="checkbox" value="" />梨 3元</label>
    <br /><br />
    当前价格: <span id="total">0</span>元
</form>
</body>
</html>


<script>
    var fruits = document.getElementById('fruits');
    var labels = fruits.getElementsByTagName('label');
    var total = document.getElementById('total');
    total.price = 0;

    // 循环给每个label标签添加price属性存标签内水果的价格
    for (var i = 0, len = labels.length; i < len; i++)
        var str = labels[i].innerText;
        var price = str.replace(/[^0-9]/ig,"");
        labels[i].price = Number(price);
    

    // 循环给每个label标签注册点击事件
    for (var i = 0, len = labels.length; i < len; i++)

        labels[i].onclick = function (e) 
            var e = e || window.event;
            var elm = e.target || e.srcElement;
            //label点击拦截,只获取input的click
            if (elm.tagName !== 'INPUT')
                return;
            
            var flag = this.firstChild.checked;
            if (flag)
                total.price += this.price;
                total.innerText = total.price;
            
            else 
                if (total.price)
                    total.price -= this.price;
                    total.innerText = total.price;
                
            
        
    
</script>

 参考技术A

下面的代码就可以，测试通过：

<script language=javascript>
function show_amnt()
var s=0,i;
for (i=0;i<form1.Fruit.length;i++)
if (form1.Fruit[i].checked) s+=parseInt(form1.Fruit[i].value);
form1.amnt.value=s;

</script>
<form action="" method="get" name="form1">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="10" onClick="show_amnt();"  />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value="5"  onClick="show_amnt();"  />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value="6"  onClick="show_amnt();"  />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value="3"  onClick="show_amnt();"  />梨 3元</label>
合计金额：<input type=text name="amnt" value="0" readonly>
</form>

追问

谢谢你

本回答被提问者和网友采纳 参考技术B <form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value=10 />苹果 10元</label>
<label><input name="Fruit" type="checkbox" value=5 />桃子5元 </label>
<label><input name="Fruit" type="checkbox" value=6 />香蕉6元 </label>
<label><input name="Fruit" type="checkbox" value=3 />梨 3元</label>
<div id="show"></div>
</form>
<button id="s">显示价格</button>
<script>
document.getElementById('s').onclick = function ()
var f = document.getElementsByName('Fruit');
var show = document.getElementById('show');
var r = 0;
for (var i = 0; i < f.length; i++)
if (f[i].checked)
r += parseInt(f[i].value);


show.innerText = r;

</script> 参考技术C 学校的作业吗？你看这个够简单吗？
<html>
<script>
function showSum()
var sum = 0;
if(document.getElementById("Fruit1").checked)
sum += 10;

if(document.getElementById("Fruit2").checked)
sum += 5;

if(document.getElementById("Fruit3").checked)
sum += 6;

if(document.getElementById("Fruit4").checked)
sum += 3;

document.getElementById("txtSum").innerText = "总价：" + sum + "元";

</script>
<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input id="Fruit1" onclick="showSum()" type="checkbox" value="" />苹果 10元</label>
<label><input id="Fruit2" onclick="showSum()" type="checkbox" value="" />桃子5元 </label>
<label><input id="Fruit3" onclick="showSum()" type="checkbox" value="" />香蕉6元 </label>
<label><input id="Fruit4" onclick="showSum()" type="checkbox" value="" />梨 3元</label>
</form>
<hr>
<font id="txtSum">总价：</font>
</html>

用JS HTML CSS 实现简单计算器的制作

html部分：

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>calculate</title>

    <link rel="stylesheet" href="calculate.css">

    <link rel="stylesheet" href="calculate.js">

 

</head>

 

<body>

    <div class="box">

        <!--大框框-->

        <div class="input">

            <!--输入框-->

            <div class="tip">

                <!--小点点-->

                <div class="tip1"></div>

                <div class="tip2"></div>

                <div class="tip3"></div>

            </div>

            <div>

                <!--输入数字框-->

 

                <!--结果显示框-->

                <input type="text" class="input_box" id="number">

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="AC">

                <ul>

                    <li οnclick="deletes()">AC</li>

                </ul>

            </div>

            <div class="AC">

                <ul>

                    <li οnclick="just()">+/-</li>

                </ul>

            </div>

            <div class="AC">

                <ul>

                    <li οnclick="input('%')">%</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('/')">&divide</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('7')">7</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('8')">8</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('9')">9</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('*')">&times</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('4')">4</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('5')">5</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('6')">6</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('-')">-</li>

                </ul>

            </div>

        </div>

        <div id="ac">

            <!--功能区域-->

            <div class="BC">

                <ul>

                    <li οnclick="input('1')">1</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('2')">2</li>

                </ul>

            </div>

            <div class="BC">

                <ul>

                    <li οnclick="input('3')">3</li>

                </ul>

            </div>

            <div class="orange">

                <ul>

                    <li οnclick="input('+')">+</li>

                </ul>

            </div>

        </div>

        <div class="bottom">

            <div class="CD">

                <ul>

                    <li οnclick="input('0')" class="CD_li">0</li>

                </ul>

            </div>

            <div class="bottom_tip">

                <ul>

                    <li οnclick="input('.')" class="CD_li">.</li>

                </ul>

            </div>

            <div class="bottom_orange">

                <ul>

                    <li οnclick="output('=')">=</li>

                </ul>

            </div>

        </div>

    </div>

    <script src="calculate.js"></script>

</body>

</html>

CSS部分：

*

    padding: 0;

    margin: 0;

    list-style: none;

*

    user-select: none;

.hover

    opacity: 0.8;

.box

    width: 480px;

    height: 570px;

    border-radius: 20px;

    border: 3px solid black;

    position: relative;

    justify-content: center;

    margin: 150px auto;

    background-color: #010101;

.input

    width:460px;

    height: 120px;

    background-color: black;

    border-top-left-radius:15px ;

    border-top-right-radius:15px;

    

.input_box

    width: 100%;

    font-size: 80px;

    color: aliceblue;

    float: right;

    background-color:#010101;

    text-align: right;

    height: 88px;

    border: 0;

  

   

.tip

    display: flex;

.tip1

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color: red;

    margin: 5px;

    display: block;

.tip2

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color:yellow;

    display: block;

    margin: 5px;

.tip3

    width: 18px;

    height: 18px;

    border-radius: 50%;

    position: relative;

    background-color:green;

    display: block;

    margin: 5px;

.input_number

    color: aliceblue;

    font-weight: bold;

    font-size: 60px;

    float: right;

    margin: 0px 20px;

    font-family:'Courier New', Courier, monospace;

    

#ac

    display: flex;

    

.AC

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 90px;

    background-color: #1e201e;

    border: 1px solid #010101;

 

.orange

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 122px;

    height: 90px;

    background-color:rgb(226, 79, 25);

    border: 1px solid #010101;

 

.orange_li

    width: 1223px;

    height: 90px;

.BC

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 90px;

    background-color: #666;

    border: 1px solid #010101;


 

.CD

   

    font-size: 60px;

    color: aliceblue;

    width: 242px;

    height: 82px;

    background-color: #666;

    border: 1px solid #010101;

    border-bottom-left-radius:15px ;

   

.CD_li

    text-align: center;

.bottom

    display: flex;

   

  

.bottom_tip

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 120px;

    height: 82px;

    background-color: #666;

    border: 1px solid #010101;

 

.bottom_orange

    text-align: center;

    font-size: 60px;

    color: aliceblue;

    width: 122px;

    height: 83px;

    background-color:rgb(226, 79, 25);

    border: 1px solid #010101;

    border-bottom-right-radius:15px ;

 

.inputbox

    background-color: #010101;

    width: 100%;

JS部分：

function input(number) 

    var inputs = document.getElementById('number').value;

    document.getElementById('number').value += number;

 

function output() 

    var put = document.getElementById('number').value;

    var puts = eval(put);

    document.getElementById('number').value = puts;

 

function deletes() 

    var inputs = document.getElementById('number').value;

    document.getElementById('number').value = '';

 

function just() 

    var just = document.getElementById('number').value;

    if(just.charCodeAt(0) == 45)

        document.getElementById('number').value = just.substr(1,just.length);

    

    else

        document.getElementById('number').value = '-' + just;

    

 

以上是关于html 用js 多选计算？的主要内容，如果未能解决你的问题，请参考以下文章

js实现鼠标拖拽多选功能

用bootstrap_select.min.js，需要支持二级联动且二级为多选

用js控制单选框或者多选框问题

js实现元素的多选,或单选功能

DropDownList下拉菜单如何多选

多选框数据绑定,js控制显示隐藏选中等方法