实施例

Question

我有一个bootstrap单选按钮，需要根据用户给出的值来选择。假设用户输入“男性”，应选择男性单选按钮。考虑用户以小写形式输入值。

    function check(){
    var val = document.getElementById("inp").value;
    if( val == "male"){
        //select male radio button
        }
    if(val == "female"){
         //select female radio button
        }
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <div class="btn-group" data-toggle="buttons">
                  <p>Gender <span>*</span></p>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 0px;" value="M" type="radio" name="gender" />M</label>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 0px;" type="radio" value="F" name="gender" />F</label>
                  
                </div><br><br>
    <input id="inp" type="text" onblur="check()"/>

Answer 1

＆＃13;

    function check(){
    var val = document.getElementById("inp").value;
    if( val == "male"){
        $("input[value='M']").click();
        }
    if(val == "female"){
         $("input[value='F']").click();
        }
    }

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <div class="btn-group" data-toggle="buttons">
                  <p>Gender <span>*</span></p>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" />M</label>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" type="radio" value="F" name="gender" />F</label>
                  
                </div><br><br>
    <input id="inp" onKeyup="check()" type="text"/>

＆＃13;

Answer 2

您可以使用JS来执行document.getElementById("rdGenderElement").checked = {true|false};

实施例

document.getElementById("btnChangeRdGenderM").addEventListener('click', function(){
    document.getElementById("rdGenderM").checked = true;
});
document.getElementById("btnChangeRdGenderF").addEventListener('click', function(){
    document.getElementById("rdGenderF").checked = true;
});

.gender{
    width: 100%;
}

button{
    padding: 10px 30px;
    margin: 5px;
}

<button id="btnChangeRdGenderM">Select M</button>
<button id="btnChangeRdGenderF">Select F</button>

<hr/>

<div class="gender">
M <input id="rdGenderM" type="radio" name="gender" />

<br/>
F <input id="rdGenderF" type="radio" name="gender" />
</div>

Answer 3

尝试使用id属性并使用toLowerCase()将值转换为小写

function check(){
    var val = document.getElementById("inp").value;
    console.log(val)
   document.getElementById(val.trim().toLowerCase()).click();
        }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <div class="btn-group" data-toggle="buttons">
                  <p>Gender <span>*</span></p>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="male" checked/>M</label>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" id="female"type="radio" value="F" name="gender" />F</label>
                  
                </div><br><br>
    <input id="inp" type="text" onblur="check()"/>

Answer 4

您可以使用jquery内置函数Click()完成此任务。

    function check(){
    var val = document.getElementById("inp").value;
    if( val == "male"){
      $('#male').click();
      console.log(val);
    }
    if(val == "female"){
      $('#female').click();
     console.log(val);
     }
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <div class="btn-group" data-toggle="buttons">
                  <p>Gender <span>*</span></p>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="male" />M</label>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" type="radio" value="F" name="gender" id="female" />F</label>
                  
                </div><br><br>
    <input id="inp" type="text" onblur="check()"/>

Answer 5

尝试以下代码段，

function check(){
    var val = document.getElementById("inp").value;

    var label_male_ = document.getElementById('male');
    var chk_male_ = document.getElementById('chk_male');

    var label_female_ = document.getElementById('female');
    var chk_female_ = document.getElementById('chk_female');
    // Set default.
    label_male_.className += 'btn btn-default';
    chk_male_.checked = false;
    // Set default.
    label_female_.className += 'btn btn-default';
    chk_female_.checked = false;
    if( val == "male"){
        //check male radio button
        label_male_.className += ' active';
        chk_male_.checked = true;
    }
    if(val == "female"){
        //check female radio button
        label_female_.className += ' active';
        chk_male_.checked = true;
    }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group" data-toggle="buttons">
    <p>Gender <span>*</span></p>
    <label class="btn btn-default" id="male">
        <input class="form-control input-sm" style="width: 10px;" value="M" type="radio" name="gender" id="chk_male" />M
    </label>
    <label class="btn btn-default" id="female">
        <input class="form-control input-sm" type="radio" value="F" name="gender" id="chk_female" />F
    </label>
</div><br /><br />
<input id="inp" type="text" onblur="check()"/>

Answer 6

您已经加入了jquery，因此我使用它来替换您的＆＃34;检查＆＃34;函数并将其绑定到输入。我们不是假设文本是小写的，而是使用toLowerCase（）手动强制它。请注意具有匹配值的radio类型输入的选择器。另请注意，我们设置了已检查的属性＆＃39;而不是旧的方法。

// bind keyup events on the input textbox
$(document).on('keyup', '#inp', function(e) {
    // get a lowercase version of the input text
    var input = $(this).val().toLowerCase();
    // do a comparison and set the appropriate radio
    if (input == 'male')
        $('input:radio[value=M]').prop('checked', true);
    else if (input == 'female')
        $('input:radio[value=F]').prop('checked', true);
});

我更喜欢使用.on（）来添加事件处理程序，因为它匹配.off（）方法来删除它们。像这样绑定到$（document）可以保证即使在创建页面时表单元素不存在，事件处理程序也会运行 - 非常适合动态生成的表单。通过组合这些，可以根据需要和焦点为绑定和解除绑定事件处理程序提供出色的控制。

Answer 7

首先请注意，您必须将用户输入值与元素的某个值匹配，以便可以动态选择它，否则您必须已经定义它将在整个元素数组中选择哪个元素。所以我把你的输入值稍微改为“男性”和“女性”。然后，根据用户输入和单选按钮值执行检查操作会很容易。

function check()
{
  var val = document.getElementById("inp").value;
  var elements = document.getElementsByName("gender");
  for(i of elements)
  {
      if(val == i.value)
      {
        i.checked= true;
        i.parentNode.classList.add("active");
     } 
     else
     {
      if(i.checked)
      i.parentNode.classList.remove("active");
     }
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    
    <div class="btn-group" data-toggle="buttons">
                  <p>Gender <span>*</span></p>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" style="width: 10px;" value="male" type="radio" name="gender" />M</label>
                  <label class="btn btn-default">
                    <input class="form-control input-sm" type="radio" value="female" name="gender" />F</label>
                  
                </div><br><br>
    <input id="inp" type="text" onblur="check()"/>

如何根据其他值检查单选按钮？

7 个答案:

实施例