флажки и текстовые поля jQuery

У меня есть 5 флажков в классе check (названы cb1, cb2, cb3, ...) и 5 соответствующих текстовых полей в классе text (TF1, tf2, tf3,...). Когда установлен один или несколько флажков, я хочу пересчитать все флажки и поместить сумму в текстовые поля, соответствующие нажатию кнопки.

Пример: если cb1 и cb3 проверены, то tf1 и tf3 будут иметь значение 2.

До сих пор я подсчитываю общее количество проверенных флажков так: 

$(':button').click(function() {
    total= $('.check:checked');
    count=total.length;
});

Но я не могу понять, как чтобы попасть в соответствующие текстовые поля. Любая помощь ценится!

P.S. У меня есть разные флажки и текстовые поля в разных классах, поэтому важно, чтобы они ссылались на класс.

3 3
jquery checkbox

3 ответа:

Возможно, что-то вроде этого: 

$(':button').click(function() {
    var total= $('.check:checked'),
        count=total.length;

    $('.text').val(function() {
       return $('#' + this.id.replace(/tf/,'cb')).is(':checked') ? count : 0;
    });
});

Каждый элемент с классом text будет обновлен, чтобы иметь значение либо count, либо 0 в зависимости от того, установлен ли соответствующий флажок. Очевидно, если вы предпочитаете, вы можете очистить поля, соответствующие непроверенным флажкам, заменив 0 на '' (пустая строка).

(для получения дополнительной информации о передаче функции в .val() метод , читай доко.)

Обратите внимание, что вы должны всегда объявляйте переменные с помощью var или создавайте глобалы.

Рабочая демонстрация: http://jsfiddle.net/aBSNy/

2

Вы можете сделать это так:

HTML: 

<div>
    <input type="checkbox" name="check1" value="" />
    <input type="text" name="text1" value="" data-count-for="check1" />
</div>
...(other checkboxes)...
<div>
    <input id="trigger" name="trigger" type="button" value="Click me" />
</div>​

JavaScript (с использованием jQuery 1.7+): 

jQuery("#trigger").on('click', function(event){
    event.preventDefault();
    // select checkboxes:
    var checkboxes = jQuery(':checkbox:checked');
    checkboxes.each(function(){
        // find text input assigned to each checked checkbox:
        var selector = '[data-count-for="' + jQuery(this).attr('name') + '"]';
        // assign it a total number of previously found checkboxes
        jQuery(selector).val(checkboxes.length);
    });
});​

Смотрите доказательство здесь: http://jsfiddle.net/EMhuw/1/

2

Убедитесь, что textarea и соответствующие флажки имеют id и имя, которые совпадают, поэтому вы можете легко связать их вместе, а затем выполнить цикл через коллекцию проверенных флажков и использовать атрибут name из флажка в качестве id для textarea, например:

JavaScript: 

// your already-computed total
count = total.length;

// loop through the collection of checked checkboxes
$('.check:checked').each( function() {

    // assign the total to each textarea where the id matches a checkbox name attr
    $('#'+$(this).attr("name")).val(total);

});

HTML: 

<input class="check" type="checkbox" name="check1" />
<input class="check" type="checkbox" name="check2" />
<input class="check" type="checkbox" name="check3" />
<input class="check" type="checkbox" name="check4" />
<input class="check" type="checkbox" name="check5" />

<textarea id="check1"></textarea>
<textarea id="check2"></textarea>
<textarea id="check3"></textarea>
<textarea id="check4"></textarea>
<textarea id="check5"></textarea>

Используя соответствующие перечислимые идентификаторы/имена, вы также обнаружите, что проще создавать больше флажков и текстовых областей на стороне сервера, используя циклическая конструкция; таким образом, это может масштабироваться до гораздо большего, чем просто 5 элементов.

1