如何使用跨度值选择单选按钮?

时间:2013-09-10 06:51:19

标签: javascript jquery html

我有这样的编码,我想在用户输入跨度值中的字符数匹配时选择单选按钮,我没有任何span和单选按钮的id。我只有类名,它列出了ul。我想通过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>

我的jquery是这样的,

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

而不是警报,我需要让单选按钮被选中。任何帮助请... ..

这是JSFiddle:http://jsfiddle.net/manibtechit/DDHBE/

3 个答案:

答案 0 :(得分:1)

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);
        }
    });
});

答案 1 :(得分:1)

尝试This,这对您更有帮助

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

       });

  });
});

答案 2 :(得分:1)

虽然你已经接受了答案,但我会提供自己的方法,如下:

$('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

参考文献: