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);
    });
});

You can test it out here。基本的方法是，不是跟上价值观，而是每次都把它们加起来，让事情更多更简单。

以上如何运作：

通过.delegate()

<table>

任何单选按钮更改时：
- 获取所有当前选中的单选按钮
- 循环遍历任何可能的值（“A”，“B”，“C”，上面的数组）......或者你可以将它展开成3行，$.each()只是让它更容易稍后扩展）。
- 对于每个可能的值，设置它的总框值，例如#txtTotalA为第一个.length（元素数量）匹配，使用.filter()获取已检查的元素，并使用该值。

如果您有多个表格，您仍然可以使用上述表格，只需将带有ID的总框更改为类，然后按这种方式查找，例如您使用$(this).closest("table").find(".txtTotal"+l)代替$("#txtTotal" + l) （缓存$(this).closest("table")以获得速度会有所帮助。

解决问题，在文本框上添加值的单选按钮。改善解决方案

1 个答案: