How to make radio button selected using span values?

Question

am having a coding like this, i want to make the radio button get selected when user enters the character count match in span value, i don't have any id for span, and radio button. am having only class name and it listed the ul. I want to do this by jquery.

Enter your name: <input type="text">
<div class="attribute_list"> 
    <ul>                                                                                 
        <li><input type="radio" value="22" name="group_5" class="attribute_radio"><span>10</span></li>
    </ul>
    <ul>                                                                                 
        <li><input type="radio" value="23" name="group_5" class="attribute_radio"><span>14</span></li>
    </ul>
</div>

my jquery is like this,

<script>
    $(document).ready(function(){
      $("input").keyup(function(){
        var y=$("input").val();
        var x=$(".attribute_list span").html();   
        if(x==y)
        {
          alert(x);
        }
      });
    });
</script>

instead of alert, i need to make that radio button get selected. any help please..

Here is JSFiddle : http://jsfiddle.net/manibtechit/DDHBE/

Answer 1

While you've already accepted an answer, I'll offer my own approach, which is as follows:

$('input[type="text"]').on('keyup', function(){
    var len = this.value.length;
    $('span').filter(function(){
        return $.trim($(this).text()) == '' + len;
    }).prev().prop('checked',true);
});

JS Fiddle demo.

References:

• filter().
• jQuery.trim().
• on().
• prev().
• text().

Answer 2

Try This, This is more helpfull for you

    $(document).ready(function(){
  $("input").keyup(function(){
     var y=$("input[type=text]").val();
     var x=$(".attribute_list span").html();   
    $('input[type=radio]').each(function(){
        if($(this).next('span').html()==y)
           $(this).prop('checked',true);
        else
          $(this).prop('checked',false);

       });

  });
});

Answer 3

Working fiddle

$(document).ready(function () {
    $("input").keyup(function () {
        var y = this.value;
        var x = [];
        $(".attribute_list span").each(function () {
            x.push($(this).text());
        });
        if (x.indexOf(y) != -1) {
            $('span').filter(':contains(' + y + ')').prev('input:radio').prop('checked', true);
        }
    });
});