как добавить текст к атрибуту, как Value

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

Я бы упростить все это, используя такую ​​удобную функцию, как 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 из этого тоже.)

Answer 2

Используйте 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 3

Просто CONCAT текущего значения текстового поля с eachChkbxRel, и вы можете использовать .val установить входы значения вместо того, чтобы использовать .attr, а также использовать идентификатор текстового поля вместо длинный селектор, который вы используете в данный момент, и this для текущего флажка в цикле.

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

});