Решение проблем, переключатели, добавляющие значения в текстовое поле.Улучшающее решение

Question

У меня есть ряд переключателей (rdoGroup1, rdoGroup2, rdoGroup3) и три текстовых поля в конце таблицы, каждое из которых txtTotalC будет подсчитывать количество переключателей со значением C, txtTotalB будет подсчитывать количествопереключатели со значением B, txtTotalA будет подсчитывать количество переключателей со значением A.

В настоящий момент я могу только тренировать стандартную функцию javascript (см. код внизу), которая будет очень большой, поскольку яу меня 11 радиогрупп, и я рассматриваю каждую из них отдельно.

Мне было интересно, есть ли какой-нибудь самый быстрый способ сделать это на jquery.

<table>
   <tr>
     <td><input type="radio" name="rdoGroup1" value="C"/></td>
     <td><input type="radio" name="rdoGroup1" value="B"/></td>
     <td><input type="radio" name="rdoGroup1" value="A"/></td>
   </tr>
   <tr>
     <td><input type="radio" name="rdoGroup2" value="C"/></td>
     <td><input type="radio" name="rdoGroup2" value="B"/></td>
     <td><input type="radio" name="rdoGroup2" value="A"/></td>
   </tr>
   <tr>
     <td><input type="radio" name="rdoGroup3" value="C"/></td>
     <td><input type="radio" name="rdoGroup3" value="B"/></td>
     <td><input type="radio" name="rdoGroup3" value="A"/></td>
   </tr>
   <tr>
     <td><input type="text" id="txtTotalC"></td>
     <td><input type="text" id="txtTotalB"></td>
     <td><input type="text" id="txtTotalA"></td>
   </tr>
</table>


var rdoGroup1A, rdoGroup1B, rdoGroup1C = 0;
function radioGroupSelected(rdoControl) {

    if (rdoControl.name == "rdoGroup1") {

        if (rdoControl.checked.value == "C") {
            txtTotalC.value = txtTotalC.value + 1;
                if (rdoGroup1B== 1) {
                    rdoGroup1B-= 1;
                }
                if (rdoGroup1A== 1) {
                    rdoGroup1A -= 1;
                }
            rdoGroup1C += 1;
        }
        if (rdoControl.checked.value == "B") {
            txtTotalB.value = txtTotalB.value + 1;
                if (rdoGroup1C== 1) {
                    rdoGroup1C -= 1;
                }
                if (rdoGroup1A == 1) {
                    rdoGroup1A -= 1;
                }
            rdoGroup1B += 1;
        }
        if (rdoControl.checked.value == "A") {
            txtTotalA.value = txtTotalB.value + 1;
                if (rdoGroup1B == 1) {
                    rdoGroup1B -= 1;
                }
                if (rdoGroup1C == 1) {
                    rdoGroup1C -= 1;
                }
            rdoGroup1A += 1;
        }

    }

}

Answer 1

Вы можете сделать что-то вроде этого:

$("table").delegate(":radio", "change", function() {
    var radios = $(this).closest("table").find(":radio:checked");
    $.each(["A", "B", "C"], function(i, l) {
      $("#txtTotal" + l).val(radios.filter("[value='"+l+"']").length);
    });
});

Вы можете проверить это здесь . Основной подход заключается в том, что вместо того, чтобы идти в ногу со значениями, просто складывайте их каждый раз, сохраняя вещи намного проще.

Как работает вышеперечисленное:

• Подключите один обработчик событий для всех переключателей в <table> через .delegate()
• При изменении любой радиокнопки:
  • Получить все проверенные в настоящий момент переключатели
  • Переберите все возможные значения («A», «B», «C», массив выше) ... или вы можете развернуть его в 3 строки, просто $.each() облегчает расширение позже).
  • Для каждого возможного значения установите его общее значение в поле, например, #txtTotalA для первого, к .length (количеству элементов), сопоставленному с использованием .filter(), чтобы получить проверяемые с этим значением.

Если у вас есть несколько таблиц, вы все равно можете использовать вышеуказанное, просто измените общее количество полей с идентификаторами на классы и найдите их таким образом, например, вы бы использовали $(this).closest("table").find(".txtTotal"+l) вместо $("#txtTotal" + l) (кэшируя $(this).closest("table") для скорости поможет).