将复选框添加到总数的Javascript函数

Javascript function adding checkboxes to a total number?

本文关键字：Javascript 函数 复选框 添加      更新时间：2023-09-26

我有一个函数，我试图将选中的复选框的总数添加到已经显示在文本框中的值。我有工作的解决方案，但它不能正确更新，如果我取消复选框，再次点击总数。

是否有一种方法可以解决这个问题，以便文本框相应地更新?

HTML 

<td><input type="text" name="Yeses" id="NumberofRisks" class = "form-control" value ="<?php echo $row['Total-Score'];?> " style = "width:50px"></td>
Javascript 

function sum()
{
  sumField = document.getElementById("NumberofRisks");
   var sum = sumField.value;
    $("input[name^='yanswer']:checked").each(function(){
    sum++;        
    });
    sumField.value = sum;

}

每次调用function sum()后，您都在更新输入的值。

改为初始sum值。

则每次使用此值。

var initial   = $("#NumberofRisks").val();
function sum()
{
     $("#NumberofRisks").val(initial + $("input[name^='yanswer']:checked").length);
     displayRating($("#NumberofRisks").val());
}

保持文本框的原始值为变量。向复选框添加一个事件侦听器，该复选框计算复选框的数量，并将该数字添加到原始值，然后更新文本框。

像这样:

HTML: 

<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="checkbox" class="check" />
<input type="textbox" class="text" />

JS: 

//Store the original value. The 5 here should be whatever was supposed to be in the textbox.
var originalValue = 5;
$('.text').val(originalValue);
$('.check').on('change', function() {
    //Count the number of checked boxes and add it to the original value for display.
    var checked = $('.check:checked').length;
    $('.text').val(originalValue+checked);
});

给你一把小提琴

相关文章：