Question

<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" /> value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" /> value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" /> value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" /> value 5

Ect等我希望在文本字段中选中复选框的添加值，在不同的不同复选框中选中所有选中的复选框值。

使用此代码添加复选框但不知道如何获取复选框的名称以及动态。例如，隐藏表单中复选框前面的文本框中的值1，值2，值3。

添加代码如下。

$(document).ready(function () {
    $("#textfield2").val( $("#textfield").val());
    $('.priceAdded input[type="checkbox"]').on("change", function () {
        var priceAdded = $("#textfield").val();
        $('.priceAdded input[type="checkbox"]').each(function () {
            if ($(this).is(":checked")) {
                priceAdded = parseFloat(priceAdded) + parseFloat($(this).val());
            }
            $("#textfield2").val(priceAdded);
        });
    });
    return false;
});

Answer 1

如果您想要获取复选框的ID以及所选值的总和

http://jsfiddle.net/hb0hhbk4/1/

HTML

<input type="checkbox" name="checkbox" id="checkbox1" value="10" class='sum' />Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" class='sum' />value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" class='sum' />value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" class='sum' />value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" class='sum' />value 5
<input id='textfield1' type='text' />
<input id='textfield2' type='text' />

JS

$("input[type='checkbox'].sum").on('click', function () {
    var total = 0;
    var ids = [];
    $("input[type='checkbox'].sum:checked").each(function () {
        var value = parseInt($(this).val());
        total += value;
        ids.push($(this).attr('id'));
    });
    ids = ids.join(" ", ids);
    $('#textfield1').val(ids);
    $('#textfield2').val(total);
});

Answer 2

如果你在复选框附近寻找LABEL，你需要做这样的事情

$( this ).closest( "span" ).text();

在每个功能中，您可以使用

访问标签

{{1}}

Answer 3

使用该布局，您可能无法使用，因为例如，无法从代码的其余部分隔离“值1”（它不是元素的内容或属性任何事情。

您可以将“Value 1/2/3/4”文本放在类似span的内容中，然后可以在Jquery中使用相邻的选择器。例如::

<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> <span>Value 1</span>

然后使用

$(this).next().text();

直接在刚刚点击的复选框后获取跨度的内容。

我在文本字段中需要的复选框名称

3 个答案: