如何使用范围值选择单选按钮

How to make radio button selected using span values?

本文关键字：选择 单选按钮 使用范围      更新时间：2023-09-26

我有这样的编码，我想在用户输入 span 值中的字符计数匹配时选择单选按钮，我没有任何 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/

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

工作小提琴 

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

虽然你已经接受了答案，但我会提供我自己的方法，如下所示：

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

JS小提琴演示。

引用：

  • filter() .
  • jQuery.trim() .
  • on() .
  • prev() .
  • text() .
相关文章：