Jquery 如何将文本附加到类似值的属性

例如，我需要将一个元素的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>

我需要将每个选中的复选框REL附加到文本输入值。若复选框未选中，则将其从值中删除！ 我还需要用“；”分隔每个值。

---

我上面的代码不起作用，因为它只将最后一个REL复制到值中，我不知道如何修复它。有人知道怎么做吗？谢谢

使用

此

仅针对当前文本框

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

---

使用

此

仅针对当前文本框

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

---

只需使用

eachChkbxRel

来设置文本框的当前值，您可以使用

.val

来设置输入值，而不是使用

.attr

，也可以使用文本框的ID而不是当前使用的冗长选择器，以及循环中当前复选框的

此

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

});

---

只需使用

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

});

---

我将使用以下方便的jQuery函数来简化所有这一切：

---

。。。但我觉得在这个问题中实际上还有更多的东西：您可能需要动态调整文本值（基于检查）。有一种方法可以做到这一点：

$(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');
});

---

我也准备好了。）

我将使用以下方便的jQuery函数简化所有这些：

---

。。。但我觉得在这个问题中实际上还有更多的东西：您可能需要动态调整文本值（基于检查）。有一种方法可以做到这一点：

$(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');
});

---

我也准备好了。）

哇，太完美了，正是我想要的。非常感谢，太完美了，正是我想要的。多谢各位