Question

大家好我正在尝试使用更改功能添加优先级编号复选框。如果选中复选框，则选中该复选框需要将其添加为1.am，其中包含div中的复选框列表我检查任何一个复选框需要将其标记为一个如果选择下一个意味着需要将其标记为两个所有方式。现在问题是事件不需要触发，而已经在我的工作中标记了复选框

<div class="it">
        <label>
            <input type="checkbox" class="span"/> 1
        </label>
    <label>
            <input type="checkbox" class="span"/> 2
        </label>
    <label>
            <input type="checkbox" class="span"/> 3
        </label>
    <label>
            <input type="checkbox" class="span"/> 4
        </label>
    <br>
    <span></span>
</div>

我的jquery

$(function () {
    var count = 0;
    $('.span').on('change', function() {
        if(this.checked) {
            count ++;
            $('span').text(count);
        }

    })

})

请为复选框FIDDLE

仅添加一次计数

Answer 1

假设您想要计算复选框，我建议

$(function () {
    $('.span').on('click', function() {
      $('span').text($(".span:checked").length);
    }).triggerHandler("click"); // handle reload and initial counter
});

div label {
    display:block;
}
div label:after{
    clear:right;
    content:" ";
}
.badge {
    float:right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="it">
        <label>
            <input type="checkbox" class="span"/> 1
        </label>
    <label>
            <input type="checkbox" class="span"/> 2
        </label>
    <label>
            <input type="checkbox" class="span"/> 3
        </label>
    <label>
            <input type="checkbox" class="span"/> 4
        </label>
    <br>
    <span></span>
</div>

Answer 2

您可以计算:checked复选框。要显示已选中复选框的数量，您还可以使用属性，请参阅代码段。

$('.it [type=checkbox]')
  .on('click', function() {
      $('[data-count]').attr('data-count',$('.it [type=checkbox]:checked').length);
   }
  );

label {
    display: block;
}

div label:after{
    clear: right;
    content: " ";
}

[data-count]:after {
    content: attr(data-count)' checked';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="it">
    <label><input type="checkbox" class="span"/> 1</label>
    <label><input type="checkbox" class="span"/> 2</label>
    <label><input type="checkbox" class="span"/> 3</label>
    <label><input type="checkbox" class="span"/> 4</label>
    <span data-count=0></span>
</div>

顺便说一下，你不需要JQuery per se。

Answer 3

试试这个......

if(this.checked) {
    count ++;
} else {
    count--;
}
$('span').text(count);

当取消选中复选框时，这会在检查和减法时考虑添加。

参见 jsFiddle

Answer 4

试试这个，

$(function () {
  var count = 0;
  $('.span').on('change', function() {        
     count =  $('.span:checked').length;        
      $('span').text(count);       
    });
 });

Demo

Answer 5

试试这个：

$(function () {
    $('.span').on('change', function() {
        $('span').text ( $( ".span:checked" ).length );
    });
});

在更改功能时需要计算一个值以进行复选框检查

5 个答案: