如何根據其他值檢查單選按鈕？

Question

我有一個引導單選按鈕，需要根據用戶賦予的值來選擇。假設用戶輸入'男性'，應選擇男性單選按鈕。考慮用戶以小寫字母輸入值。

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

您可以使用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 2

嘗試用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 3

function check(){ 
 
    var val = document.getElementById("inp").value; 
 
    if(val == "male"){ 
 
     $("input[value='M']").click(); 
 
     } 
 
    if(val == "female"){ 
 
     $("input[value='F']").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" />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"/> 
 
    
 

Answer 4

嘗試下面的片段，

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 5

你可以用JS做document.getElementById("rdGenderElement").checked = {true|false};

Ë xample

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 6

你已經包括jQuery的，所以我使用的替換您的「檢查」功能，並將其綁定到輸入。我們不會假定文本是小寫，而是使用toLowerCase（）手動強制它。注意匹配值的類型無線電輸入的選擇器。另請注意，我們將屬性設置爲「已檢查」而不是舊方法。

// 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()"/>