Question

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

示例：如果选中cb1和cb3而不是tf1，则tf3将具有值2.

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

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

但我无法弄清楚如何在相应的文本字段中获得“计数”。任何帮助表示赞赏！

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

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属性作为{ {1}}对于textarea，如下：

<强> JavaScript的：

id

<强> HTML：

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

});

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

复选框和文本字段jQuery

3 个答案: