javascript-RadioButtonList-仅显示在文本框中键入的单选按钮

我需要使单选按钮列表在文本框中键入时可过滤.表示如果我键入M,则“音乐与音乐”应该播放电影广播.我想用JS或jquery来实现,以避免回发.我对他们两个都不了解.

请向我建议已经做过的这类事情.

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />

<asp:RadioButtonList ID="Radio1" runat="server" RepeatLayout="Flow">
    <asp:ListItem value="1">Music</asp:ListItem>
    <asp:ListItem value="2">Sports</asp:ListItem>
    <asp:ListItem value="3">Cooking</asp:ListItem>
    <asp:ListItem value="4">Travelling</asp:ListItem>
    <asp:ListItem value="5">Moview</asp:ListItem>
    <asp:ListItem value="6">Cricket</asp:ListItem>
</asp:RadioButtonList>

解决方法:

RadioButtonList将创建以下标记,因此您可以分别在标签上使用正则表达式切换行：-

$('#TextBox1').keyup(function() {

  var text = $(this).val();
  var regex = new RegExp(text, 'ig');

  $('#Radio1 label').each(function() {
    $(this).closest('tr').toggle(regex.test(this.innerText));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input name="TextBox1" type="text" id="TextBox1">

<br/>
<br/>

<table id="Radio1" border="0">
  <tbody>
    <tr>
      <td>
        <input id="Radio1_0" type="radio" name="Radio1" value="1">
        <label for="Radio1_0">Music</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_1" type="radio" name="Radio1" value="2">
        <label for="Radio1_1">Sports</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_2" type="radio" name="Radio1" value="3">
        <label for="Radio1_2">Cooking</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_3" type="radio" name="Radio1" value="4">
        <label for="Radio1_3">Travelling</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_4" type="radio" name="Radio1" value="5">
        <label for="Radio1_4">Moview</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="Radio1_5" type="radio" name="Radio1" value="6">
        <label for="Radio1_5">Cricket</label>
      </td>
    </tr>
  </tbody>
</table>