Question

我需要将元素的REL属性附加到另一个元素的值。我的HTML是：

<div class="chkbxs">
    <input type="checkbox" for="" id="chkbx_1" rel="ABC" />
    <input type="checkbox" for="" id="chkbx_2" rel="DEF" />
</<div>
<div class="txtinpts">
    <input type="text" id="txt_1" value="" />
</div>

我的jquery代码：

$(function(){
    $('.chkbxs input[type="checkbox"]:checked').each(function(){
        var eachChkbxRel = $('.chkbxs input[type="checkbox"]:checked').attr('rel');
        $('.txtinpts input[type="text"]').attr('value', eachChkbxRel);
    });

});

我需要将每个选中的复选框REL附加到文本输入VALUE。如果未选中复选框，请将其从VALUE中删除！我还需要用';'分隔每个值。我上面的代码不起作用，因为它只将最后一个REL复制到VALUE中，我不知道如何解决它。谁知道怎么样？感谢

Answer 1

使用this仅定位当前文本框

var eachChkbxRel = $('.chkbxs input[type="checkbox"]:checked').attr('rel');

应该是

var eachChkbxRel = $(this).attr('rel');

尝试使用id作为选择器，因为它更快。您可以使用map和filter方法完成工作。

$(function(){
    var $chkboxes = $('#chkbx_1, #chkbx_2'),
        $textbox  = $('#txt_1');
    // Cache your selectors

    // Bind a change event to checkbox
    $chkboxes.change(function() {
        // Filter only checkboxes that are checked
        var arr = $chkboxes.filter(':checked').map(function() {
           return $(this).attr('rel')
        });
        // If length of object -- Then join the oject
        var value = arr.length > 0 ? arr.get().join('') : '';

        //$textbox.attr('value', value);
        $textbox.val(value);
    });
}).change();

<强> Check Fiddle

Answer 2

我使用$.map这样方便的jQuery函数简化了所有这些：

$('.txtinpts input[type=text]').val(
    $.map($('.chkbxs input:checkbox:checked'), function(el) { 
        return el.getAttribute('rel') }
    ).join(',')
);

JSFiddle

...但我觉得实际上这个问题不止于此：您可能需要动态调整文本值（基于检查）。这是一种方法：

$(function(){
    var $textInput = $('.txtinpts input[type=text]'),
        $checkboxes = $('.chkbxs input[type=checkbox]');

    $checkboxes.change(function() {
        var rels = $.map($checkboxes, function(el) {
          return el.checked ? el.getAttribute('rel') : undefined });
        $textInput.val(rels.join(','));
    });
    $checkboxes.trigger('change');
});

我也准备了JSFiddle。）

Answer 3

只需使用eachChkbxRel连接文本框的当前值，您就可以使用.val设置输入值而不是使用.attr，也可以使用文本框的ID您当前使用的冗长选择器，以及循环中当前复选框的this。

$(function(){
    $('.chkbxs input[type="checkbox"]:checked').each(function(){
        var curInputVal = $('#txt_1').value();
        var eachChkbxRel = $(this).attr('rel');
        $('#txt_1').val(curInputVal+";"+eachChkbxRel);
    });

});

如何将文本附加到像Value这样的属性

3 个答案: