флажки и текстовые поля 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 ответа:
Возможно, что-то вроде этого:
$(':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/
Вы можете сделать это так:
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/
Убедитесь, что 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 элементов.