javascript - Jquery根据复选框选择更改跨度文本

Question

我试图根据我的复选框更改跨度文本。这是我的 html

    <form method="get">
        <div class="kanDu">
            <p>Heading 1</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
            <input type="checkbox" />test4

        </div>
        <div class="erDutil">
            <p> Heading 2</p>
            <input type="checkbox" />test1
            <input type="checkbox" />test2
            <input type="checkbox" />test3
        </div>
        <div class="vilDu">
            <p>Heading 3</p>
         <input type="checkbox" />test1
            <input type="checkbox" />test2 
            <input type="checkbox" />test3
            <input type="checkbox" />test4 
        </div>
        <div class="inern_btn">
<p class="score">Score:<span class="getScore"></span><span>/</span><span class="totalScore"></span></p>
            <input type="Submit" name="Submit" />
        </div>

        </form>

我需要根据复选框更改 span 元素文本。类 totalscore 的 span 元素包含复选框总数的文本。getscopre span 包含选中的复选框数。

我试过这样的东西

$(document).ready(function () {

    var numberOfChecked = $('input:checkbox:checked').length;
    var totalCheckboxes = $('input:checkbox').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

        }); 

得到的复选框总数及其工作正常，但另一个不工作。任何人都可以提供一些帮助。在此先感谢。

Answer 1

尝试添加代码。它应该工作

    $(document).ready(function () {

        var numberOfChecked = $('input:checkbox:checked').length;
        var totalCheckboxes = $('input:checkbox').length;
        $('.getScore').text(numberOfChecked);
        $('.totalScore').text(totalCheckboxes);

        $("input[type=checkbox]").change(function () {
            var numberOfChecked = $('input:checkbox:checked').length;
            $('.getScore').text(numberOfChecked);
         });
    });