在文本框的前缀上选择单选按钮

select radio button on prefix in textbox

本文关键字：选择 单选按钮 前缀 文本      更新时间：2023-09-26

我有三个单选按钮

<input type=radio id=pp />Product
<input type=radio id=pr />Price
<input type=radio id=bb />both

如果我点击product，它会显示product，如果我选择price，它会显示product的价格，如果同时显示我在文本框中输入的产品的价格和产品。

如果我只使用键盘，我想要什么，我在文本框中输入一些前缀，如pp为产品，pr为价格，bb为两者。因此，如果pp然后无线电产品应该被选中和其他取消选择。

这可以很容易地用jQuery实现。

为您想要运行该功能的所有文本框具有相同的名称或类，并使以下代码

$(function() {
    $(".classnameoftextbox").change(function() {
        var txtVal = $(this).val();
        try  {
            $("#"+ txtVal).attr('selected', true);
        }
        catch(ex)  {}
    });
});

我在文本框中键入一些前缀，如pp表示产品，pr表示价格，bb表示两者。因此，如果pp然后无线电产品应该被选中和其他取消选择。 

   <input type="text" id="mytext" onkeyup="checkRadio(this);"/>
    <input type=radio id=pp name='filterchk'/>Product 
    <input type=radio id=pr name='filterchk'/>Price 
    <input type=radio id=bb name='filterchk' checked="checked"/>both
<script>
function checkRadio(obj){
    var t = obj.value;
    if(t.substr(0,2)=='pp'){
        document.getElementById('pp').checked = true;
        document.getElementById('pr').checked = false;
        document.getElementById('bb').checked = false;
        }
    else if(t.substr(0,2)=='pr'){
        document.getElementById('pp').checked = false;
        document.getElementById('pr').checked = true;
        document.getElementById('bb').checked = false;
        }
    else{
        document.getElementById('pp').checked = false;
        document.getElementById('pr').checked = false;
        document.getElementById('bb').checked = true;
        }
}
</script>

您可以查看jQuery，特别是键盘事件以及如何使用它们…这样你就不必使用文本输入框了。

另一种方法是在onchange事件中放置一个函数来检查框中的字符串是否与后缀匹配，如果匹配，则更改单选按钮的选择。

相关文章：