开发者

How to I get the text of my nested anchor tag using jQuery?

Needless to say, but I'm extremely new to jQuery...

I have list of checkboxes and after a user has selected a few I'm trying to build a jquery call that will retrive the text of the selected checkboxes. Here's what I have...

My List of checkboxes ( this is actually a longer list)

<li><input type="checkbox" value="1099511627776" name="group[42][1099511627776]" id="mce-group[42]-42-0"><label for="mce-group[42]-42-0"><a class="screenshot" rel="images/pass1.png"&g开发者_如何学Pythont;Good Luck. Pass It On.</a></label></li>
<li><input type="checkbox" value="2199023255552" name="group[42][2199023255552]" id="mce-group[42]-42-1"><label for="mce-group[42]-42-1"><a class="screenshot" rel="images/pass2.png">You’re One Of The 8 Special Women...</a></label></li>
<li><input type="checkbox" value="4398046511104" name="group[42][4398046511104]" id="mce-group[42]-42-2"><label for="mce-group[42]-42-2"><a class="screenshot" rel="images/pass3.png" id="keep">Keep It Up</a></label></li>

The jQuery script I built that I can't quite figure out is below. Basically I want to retrieve the text in the anchor tag... Good Luck. Pass It On., You’re One Of The 8 Special Women..., Keep it Up

<script type="text/javascript">
        function displayVals() {
            var selectData = $('input:checked').map(function() {
                                                return "<p id='choice'>" + $('a.screenshot') + "</p>";
                                                }).get().join('');
            $("p.#you_selected").html(" <b>YOU HAVE CHOSEN:</b> <br>" +  "<div id='choice_list'>" + selectData + "</div>" );
        }
        displayVals();
        $(":checkbox").click(displayVals);
    </script>


Here is a working example. The JS looks like this:

$(document).ready(function () {

    $('input:checkbox').click(function () {

        //alert('clicked');

        var texts = new Array();

        $('input:checked').each(function () {
            texts.push($(this).siblings('label').children('a.screenshot').text());
        });

        alert(texts);
    });  
});

Enjoy!


First you need to find a label with a for attribute matching the id of the checkbox checked and find its containing a tag text:

function displayVals() {
    var selectData = $('input:checkbox:checked').map(function(n, i) {
        var text = $("label[for='" + i.id + "'] a").text();
        return "<p id='choice'>" + text + "</p>";
    }).get().join('');

    $("p.#you_selected").html(" <b>YOU HAVE CHOSEN:</b> <br>" 
        + "<div id='choice_list'>" + selectData + "</div>");
}

working example: http://jsfiddle.net/hunter/ZSmRC/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜