3

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

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

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

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

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

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

4

3 回答 3

2

也许有点像这样：

$(':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/

于 2012-05-22T02:13:10.893 回答
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/

于 2012-05-22T02:13:46.180 回答
1

确保 textarea 和相应的复选框具有匹配的 id 和 name，因此您可以轻松地将它们绑定在一起，然后循环检查复选框的集合并将name复选框中的属性用作idtextarea，如下所示：

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 个元素。

于 2012-05-22T02:09:46.523 回答