Javascript 网页中的数值

我很抱歉，如果这是一个重复，我意识到这是相当广泛的。我在试图理解如何处理以下问题时遇到了一些困难：

我想定义一个数值，并允许用户单击复选框，比如多个边和相应的边。现在，在每个连续的边点击后，边的数量将减少，并在网页中显示更新的数量

我该怎么办呢！在jquery中定义所有变量等，然后创建函数检查复选框是否已被单击，然后通过更新来减少变量。 然而，在此之后，我如何在html部分中实际使用此变量来显示剩余的边数？据我所知，html实际上没有变量。抱歉，如果这让人困惑，我是网络编程新手

您可以将数据存储在网页中，方法是将其作为字符串存储在属性中或元素中

不过，在许多情况下，最好只保留JavaScript中的变量，它们将返回其类型

var x = 5;

document.getElementById('example').setAttribute('data-var-x', x);

var y = document.getElementById('example').getAttribute('data-var-x');

在上面的示例中，使用x表示数字为5，而使用y表示字符串为5。您需要将其解析为一个数字才能正确使用它。。。例如，使用以下方法：

或者你可以使用parseInt

---

正确，您无法仅在HTML中执行此操作，您可以使用jQuery定义一个变量，该变量是用户可以选择的边的总数，然后每次单击复选框时减少该变量，或者如果取消选择，则增加该变量

下面是一个简单的示例，可以让您开始使用，您还可以在此基础上进行扩展，以防止用户在选择了有限的边数后再选中任何复选框

$(document).ready(function() {
    var sidesRemaining = 3;
    $('.sidesRemaining').html(sidesRemaining);
    $('input[type="checkbox"]').click(function() {
       if ($(this).is(':checked')) {
           // Decrease total by 1
           sidesRemaining -= 1;
       } else {
           // Increase total by 1
           sidesRemaining += 1;
       }
       $('.sidesRemaining').html(sidesRemaining);
    });
});

---

jQuery'output'。HTMLNumber是否剩余？其中output是一个id为output的HTML元素，NumberMaining是您的JavaScript变量。谢谢您的帮助。但是，除非我误解了它的工作原理，否则当单击复选框时，它总是会增加或减少计数器，但是如果在其他div中有其他复选框呢？那么您需要使jQuery选择器更加具体。

var y = parseInt(document.getElementById('example').getAttribute('data-var-x'), 10);

$(document).ready(function() {
    var sidesRemaining = 3;
    $('.sidesRemaining').html(sidesRemaining);
    $('input[type="checkbox"]').click(function() {
       if ($(this).is(':checked')) {
           // Decrease total by 1
           sidesRemaining -= 1;
       } else {
           // Increase total by 1
           sidesRemaining += 1;
       }
       $('.sidesRemaining').html(sidesRemaining);
    });
});