复选框和文本字段 jQuery

Question

我在类检查中有 5 个复选框（名为 cb1、cb2、cb3、...），在类文本中有 5 个相应的文本字段（名为 tf1、tf2、tf3、...）。当一个或多个复选框被选中时，我想计算所有选中的复选框并将总和放入单击按钮时对应的文本字段中。

示例：如果检查 cb1 和 cb3，则 tf1 和 tf3 的值为 2。

到目前为止，我正在计算总选中的复选框，如下所示：

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

但我不知道如何在相应的文本字段中获取“计数”。任何帮助表示赞赏！

附：我在不同的类中有不同的复选框和文本字段，因此它们被类引用很重要。

Answer 1

也许有点像这样：

$(':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() method 的更多信息，请阅读the doco。）

请注意，您应该始终使用 var 声明变量，或者创建全局变量。

工作演示：http://jsfiddle.net/aBSNy/

Answer 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/

Answer 3

确保 textarea 和相应的复选框具有匹配的 id 和名称，这样您就可以轻松地将它们绑定在一起，然后遍历选中的复选框集合并使用复选框中的 name 属性作为 id对于文本区域，如下所示：

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>

使用匹配的枚举 ids/names，您还会发现使用循环结构在服务器端生成更多复选框和文本区域更容易；因此，这可以扩展到不仅仅是 5 个元素。