javascript - 在单击的单选按钮上追加输入框的文本

Question

我一直在尝试在单击特定单选按钮时附加输入框的值。

单选按钮行是动态生成的。每行将有 7 个单选按钮。

单击按钮时，行 ID 及其值将使用数组放入文本区域。但是，现在当单击最后一个单选按钮(缺失)时，不仅需要附加行 ID 和值，还需要附加显示的输入框文本。

到目前为止，我们有 14001290~01~01~CD0|15489587~03~01~CM，其中 CDO 和 CM 是单选按钮的值，前面的是行 ID。

我们现在需要的是 14001290~01~01~CD0|15489587~03~01~CM~Append this text|87554585~02~04~CD1 ?

这是我的代码。

$("input:radio").hover(
function() {
$(this).prev('.r-title').show();
  }, function() {
if (!$(this).is(':checked')) {
    $(this).siblings('.r-title, .m-notes').hide();
  }
});
$("input:radio").click( 
function () {
$(this).parent().parent().find('.r-title, .m-notes').hide();
var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;
var clicked =[];
$("#totalRd .rd-count").html(totalRd);
$(this).siblings('.r-title, .m-notes').show(); 
$('table').find(":not(.pend) >input[type=radio]:checked").each(function() {
var selectedId = $(this).parent().parent().attr('id');
clicked.push(selectedId+"~"+this.value); 
}); //checked
$("#inputhere").val(clicked.join('|'));
});

Fiddle here

希望有人能帮助我。如果您不确定这个问题，请问？谢谢

Answer 1

像这样:

JSFiddle:http://jsfiddle.net/TrueBlueAussie/jj4Uv/22/

请随意删除所有评论 :) 基本上它会在文本框的 keyup 和单选检查更改时更新。

// Hover shows/hides the additional information
$("input:radio").hover(function () {
    $(this).prev('.r-title').show();
}, function () {
    if (!$(this).is(':checked')) {
        $(this).siblings('.r-title, .m-notes').hide();
    }
});

/* $this is the radio button */    
function updateSummary($this){
    $this.closest('[id]').find('.r-title, .m-notes').hide();
    var totalRd = $('table').find(':not(.pend) > input:radio:checked').length;

    // Array of clicked items
    var clicked = [];

    // Set number of selected items
    $("#totalRd .rd-count").html(totalRd);

    // Show the title and notes next to the radio button
    $this.siblings('.r-title, .m-notes').show();

    // Find all checked radio buttons
    $('table').find(":not(.pend) >input[type=radio]:checked").each(function () {
        // Find closest ancestor with an id
        // See if we have a text box, if so use the text
        var $text = $(this).siblings('input[type=text]:visible');
        var selectedId = $(this).closest('[id]').attr('id');
        var value = selectedId + "~" + $(this).val();
        if ($text.length)
        {
            value += "~" + $text.val();
        }
        clicked.push(value);
    }); //checked

    // Display the selected ids 
    $("#inputhere").val(clicked.join('|'));
}

// Radio selection changes selected options
$("input:radio").click(function () {
    updateSummary($(this));    
});
$('input[type=text].m-notes').bind('keyup', function () {
    // Pass the target radio button to our helper
    updateSummary($(this).siblings(':radio'));
});

我注意到您使用的是旧版本的 JQuery，否则我会将事件切换为使用 on 的委托(delegate)版本而不是“bind”。