如何將文本附加到屬性值

我需要將元素的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中刪除！我也需要用';'來分隔每個值。我上面的代碼不起作用，因爲它只將最後一個REL複製到VALUE中，我不知道如何解決它。任何人都知道如何？由於

來源

2013-08-18 Payam Shakibafar

我簡化了這一切，使用如此便捷的jQuery功能$.map：

$('.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了。）

來源

2013-08-18 18:45:45 raina77ow

哇完美，正是我所期待的。非常感謝 –

使用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

來源

2013-08-18 18:39:29

只是CONCAT文本框與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); 
    }); 

});

來源

2013-08-18 18:39:44

如何將文本附加到屬性值

回答

相關問題