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元素具有复选框总数的文本.getcopre span具有已选中复选框计数的数量。

我试过这样的事情

$(document).ready(function () {

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

        });

复选框计数的总数和工作正常，但另一个没有工作。任何人都建议一些帮助。谢谢提前。

Answer 1

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

    $(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);
         });
    });

Answer 2

这是代码

 $('form').on('click', function(){
    $('.totalScore').text( $('input:checked').length )
  });

Fiddle Demo

Answer 3

$(document).ready(function () {
    $('.totalScore').text($('input:checkbox').length);
    $('.getScore').text($('input:checkbox:checked').length)

    $(':checkbox').on('click', function() {
        $('.getScore').text($('input:checkbox:checked').length);
    });
})

DEMO

Answer 4

要使其工作，您需要编写一个函数，在每个复选框上调用/取消选中将更新值的函数。

检查此js小提琴http://jsfiddle.net/4UdYQ/

var numberOfChecked;
$(document).ready(function () {


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

}); 

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

Answer 5

尝试此代码以获取已选中复选框的计数

var numberOfChecked = $("[type='checkbox']:checked").length;

Jquery根据复选框选择更改范围文本

5 个答案: