JQuery - 显示超链接文本

时间:2015-11-11 18:22:04

标签: jquery jquery-ui jquery-plugins

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

所以它应该是这样的......

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

我已经研究并提取了一些代码并让它显示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

1 个答案:

答案 0 :(得分:0)

尝试这样:

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