JQuery - 显示超链接文本

Question

从用户选择的选项中寻找显示超链接的帮助。我正在尝试做的是根据复选框选择形成一个带有链接的句子。

所以应该是这样的……

您已表示对写作支持、停车和住房感兴趣。 - 这些关键字应该是链接。

我研究并提取了一些代码并让它显示href，但不确定如何从选项中动态创建链接。感谢任何帮助。

<input type="checkbox" name="resource" value="Housing" href="http://housing.fake.com"> Housing</input>
<input type="checkbox" name="resource" value="Parking" href="https://Parking.fake.com"> Parking</input>
<input type="checkbox" name="resource" value="Writing Support" href="https://writing.fake.com"> Writing Support</input>


<div id="result"></div>

<input type="submit" id="submit" name="submit" value="Show Me the Resources">

var $result = $('#result');

$('input[type="submit"]').click(function () {
    var total = $('input[type="checkbox"]:checked').length;
    if (total <= 0 ) {
        $('#result').text('You have not indicated any interest. Please choose some options.');
    }
    else if (total == 1) {
        $('#result').text('You have indicated an interest in ' + $('input[type="checkbox"]:checked').attr('href') + '. Please click on the link to learn more about these resources.');
    } else {
        $('#result').text('You have indicated an interest in ');
        $('input[type="checkbox"]:checked').each(function(i) {
            if(i == total-1) {          
                $result.append('and ' + $(this).attr('href') + '.<br/> Please click on the links to learn more about these resources.');
            } else {
                $result.append($(this).attr('href') + ', ');
            }
        });  
    }
});

JFFiddle

Answer 1

试试这样：

$('#result').html('You have indicated an interest in ' + '<a href="' 
+ $('input[type="checkbox"]:checked').attr('href') + '">'
+ $('input[type="checkbox"]:checked').attr('href') + '</a> '
+ '. Please click on the link to learn more about these resources.');