1

例如，我需要将一个元素的 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 中，我不知道如何修复它。有人知道怎么做吗？谢谢

4

3 回答 3

3

用于this仅定位当前文本框

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

应该

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

id当你有一个选择器时尝试使用它，因为它更快。你可以使用mapandfilter方法来完成你的工作。

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

检查小提琴

于 2013-08-18T18:39:29.570 回答
2

我会简化这一切，使用像$.map这样方便的 jQuery 函数：

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

JSF中。

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

$(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-18T18:45:45.890 回答
0

只需将文本框的当前值与 连接起来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-18T18:39:44.413 回答