在检查输入时切换标签分类 javascript

Toggling a label class when a input is checked javascript

本文关键字：分类 javascript 切换标签 检查 输入      更新时间：2023-09-26

我将做一个快速的代码转储，我将在提取它时进行解释。

function findTotal() {
    var items = new Array();
    var itemCount = document.getElementsByClassName("items");
    var total = 0;
    var id = '';
    for (var i = 0; i < itemCount.length; i++) {
        id = "c" + (i + 1);
        if (document.getElementById(id).checked) {
            var element = document.getElementById(id);
            total = total + parseInt(element.value);
            element.classList.toggle('active');
        }
    }
    console.log(total);
    document.getElementById('displayTotal').value = total;
}

所以上面的代码基本上是一长串复选框，并检查哪些复选框被选中，如果是，它会将它们的值相加，然后在底部显示它们的总数。

我今天要关注的是这一部分

if (document.getElementById(id).checked) {
    var element = document.getElementById(id);
    total = total + parseInt(element.value);
    element.classList.toggle('active');
}

我正在寻找它做的是获取检查的输入的标签（测试它们中的每一个）并切换活动类。

.HTML

<label class="hover topping" for="c4"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c4">BABYBEL</label>
<label class="hover topping" for="c5"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c5">TOMATOES</label>
<label class="hover topping" for="c6"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c6">OLIVES</label>
<label class="hover topping" for="c7"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c7">MUSHROOMS</label>
<label class="hover topping" for="c8"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c8">CHICKEN</label>
<label class="hover topping" for="c9"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c9">MOZZARELLA</label>
<label class="hover topping" for="c10"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c10">SALAMI</label>
<label class="hover topping" for="c11"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c11">ONIONS</label>
<label class="hover topping" for="c12"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c12">PEPPERONI</label>
<label class="hover topping" for="c13"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c13">STUFFED CRUST</label>
<label class="hover topping" for="c14"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c14">MEATBALLS</label>
<label class="hover topping" for="c15"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c15">BACON</label>
<label class="hover topping" for="c16"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c16">HAM</label>
<label class="hover topping" for="c17"><input class="items" onclick="findTotal()" type="checkbox" name="topping" value="1.00" id="c17">SHRIMPS</label>

由于 Shalini 的请求，我添加了与 javascript 相关的 HTML 部分，不要在开始时担心其他 c id。

更新

我现在正在使用 pkmiec 在下面提供的代码，但现在我遇到了一个问题，当我单击不同的复选框时，我检查的最后一个输入也会被切换。很难解释，所以我暂时上传了它（对不起，如果有人再次找到这篇文章并且它已经消失了）

Meet document.querySelectorAll 并使其更短

function findTotal() {
    var checkedItems = document.querySelectorAll(".items:checked");
    var total = checkedItems.length;
    for (var i = 0; i < total; i++) {  
       //toggle class on input
       checkedItems[i].classList.toggle('active');
       //toggle class on label
       checkedItems[i].parentNode.classList.toggle('active');
    }
   console.log(total);
   document.getElementById('displayTotal').value = total;
}

你的代码看起来不错 - 什么不起作用？如果要切换标签的类而不是输入，请将element.classList.toggle('active');更改为 element.parentNode.classList.toggle('active'); 。

相关文章：