Трябва да преброите стойност, докато сте във функцията за промяна за отметка в квадратчето

Здравейте всички, опитвам се да добавя приоритетен номер, като използвам функцията за промяна за квадратчето за отметка. Докато изберете квадратчето за отметка, ако е поставено отметка, трябва да го добавите като 1. имам списък с квадратчета за отметка в рамките на 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


javascript checkbox jquery
person Joseph    schedule 03.12.2014    source източник

Отговори (5)


arrow_upward
4
arrow_downward

Ако приемем, че искате да преброите отметка, предлагам това

$(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>

person mplungjan    schedule 03.12.2014
comment
Здравейте, можете ли да помогнете с този stackoverflow.com/questions/27294318/ - person Joseph; 04.12.2014

arrow_upward
2
arrow_downward

Можете да преброите :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.

person KooiInc    schedule 03.12.2014
comment
Интересен +1 - но защо не .data(count)? - person mplungjan; 04.12.2014
comment
Тъй като $.data(...) не работи с първоначалната стойност на атрибута, която вече е дефинирана в html. - person KooiInc; 04.12.2014
comment
И тъй като $.data всъщност не създава/модифицира data-* attribute за елемента, така че css също няма да работи. Можете обаче да използвате .dataset, за да зададете/промените атрибута, вижте jsfiddle.net/ow1jqn2h - person KooiInc; 04.12.2014
comment
трябва да работи api.jquery.com/jquery.data : $('#counter').data('count',$('.it [type=checkbox]:checked').length); или казвате CSS няма да хареса този метод? - person mplungjan; 04.12.2014
comment
Да, това казвам. jQuery умело се опитва да преобразува данните в подходящ тип (булеви стойности, числа, обекти, масиви или null) и избягва докосването на DOM (източник: sitepoint.com/use-html5-data-attributes) - person KooiInc; 04.12.2014
comment
здравейте, бихте ли помогнали stackoverflow.com/questions/27294318/ - person Joseph; 04.12.2014

arrow_upward
1
arrow_downward

Опитайте тази ...

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

Това отчита добавяне при поставяне на отметка и изваждане при премахване на отметка в квадратче.

Вижте jsFiddle

person rfornal    schedule 03.12.2014

arrow_upward
0
arrow_downward

Опитайте тази,

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

Демо

person Krish R    schedule 03.12.2014

arrow_upward
0
arrow_downward

Опитайте тази:

$(function () {
    $('.span').on('change', function() {
        $('span').text ( $( ".span:checked" ).length );
    });
});
person Vijay Wadnere    schedule 03.12.2014