Javascript 多个复选框操作_Javascript_Html

Javascript 多个复选框操作

javascript html

Javascript 多个复选框操作,javascript,html,Javascript,Html,我想创建多个复选框，每次我选中其中一个复选框时，第一个输入的值都会减少一个数字，例如，当我们选择复选框1时，输入中的数字会减少10，当我们选择复选框2时，它会减少20，当我们同时选择这两个复选框时，它会减少30。不过，我已经处理了第一个复选框 <html lang="en"> <head> </head> <body> <input type="number" id="input"> <input type="c

我想创建多个复选框，每次我选中其中一个复选框时，第一个输入的值都会减少一个数字，例如，当我们选择复选框1时，输入中的数字会减少10，当我们选择复选框2时，它会减少20，当我们同时选择这两个复选框时，它会减少30。不过，我已经处理了第一个复选框

<html lang="en">
<head>
</head>
<body>
    <input type="number" id="input">
    <input type="checkbox" onclick="one()" id="checkboxId">
    <input type="checkbox" onclick="" id="checkboxId2">
    <p id="par">hello</p>
    <script>
        function one () {
            var check = document.getElementById("checkboxId");
        if (check.checked) {
            let input = document.getElementById("input").value;
            y = input - 10;
            document.getElementById("par").innerHTML = y;
        } else {
             document.getElementById("par").innerHTML=document.getElementById("input").value;
            }
        }
    </script>
</body>
</html>


你好
功能一（）{
var check=document.getElementById（“checkboxId”）；
如果（勾选，勾选）{
让输入=document.getElementById（“输入”）.value；
y=输入-10；
document.getElementById（“par”）.innerHTML=y；
}否则{
document.getElementById（“par”）.innerHTML=document.getElementById（“input”）.value；
}
}

您可以尝试使用数据-*属性。此外，只能从选中的复选框中获取值，求和并从输入值中扣除

请尝试以下方法：

功能一（）{
var total=Array.from（document.querySelectorAll（':checked'））
.map（el=>el.getAttribute（'data-value'））
.减少（（a，c）=>a+数字（c），0）；
document.getElementById（“par”）.textContent=Number（document.getElementById（“input”）.value）-总计；
}


你好