選擇頁面上的任何單選按鈕

Question

我有兩個無線電組，我需要獲取更改的任何單選按鈕的值。但jQuery僅在第二組上單擊時返回第一組無線電項目的值。

感謝您的建議，添加：收音機到.options選擇器，但我有其他表單元素，如選擇我監視變化。任何方式，我們可以添加這個變量？

$('.options').change(function() {   
 
     
 
     var checkedInput = $('.options input:checked').val(); 
 
     
 
     console.log('Checked input is : '+ checkedInput);  
 
     alert('Checked input is : '+ checkedInput);  
 
     
 
     });

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

 
<div class="options"> 
 
    
 
    <input type="radio" name="group-one" value="pink" checked > 
 
    <label for=""> pink </label> 
 
    <input type="radio" name="group-one" value="blue"> 
 
    <label for=""> blue </label> 
 
    <input type="radio" name="group-one" value="black"> 
 
    <label for=""> black </label> 
 
    <hr> 
 
    
 
    <input type="radio" name="group-two" value="orange"> 
 
    <label for=""> orange </label> 
 
    <input type="radio" name="group-two" value="banana"> 
 
    <label for=""> banana </label> 
 
    <input type="radio" name="group-two" value="apple"> 
 
    <label for=""> apple </label> 
 
    
 
</div>

Answer 1

非常關閉這一點，只有一個與可供選項類和所有形式的div元素在裏面吧。我只需要一個var中的單選按鈕的值。

$(function() { 
 
    var eleToSelect = '.options :radio'; 
 
    $(eleToSelect).change(function() { 
 

 
    var checkedInput = $(this).val(); 
 

 
    console.log('Checked input is : '+ checkedInput); 
 

 
    alert('Checked input is : '+ checkedInput); 
 
    $('#result').text('Checked input is : '+ checkedInput); // for the snippet 
 

 
    }); 
 
    eleToSelect = '.options1 select'; 
 
    $(eleToSelect).change(function() { 
 

 
    var checkedInput = $(this).val(); 
 

 
    console.log('Checked input is : '+ checkedInput); 
 

 
    alert('Checked input is : '+ checkedInput); 
 
    $('#result').text('Checked input is : '+ checkedInput); // for the snippet 
 

 
    }); 
 
});

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

 

 
<div class="options"> 
 

 
    <input type="radio" name="group-one" value="pink" checked > 
 
    <label for=""> pink </label> 
 
    <input type="radio" name="group-one" value="blue"> 
 
    <label for=""> blue </label> 
 
    <input type="radio" name="group-one" value="black"> 
 
    <label for=""> black </label> 
 
    <hr> 
 

 
    <input type="radio" name="group-two" value="orange"> 
 
    <label for=""> orange </label> 
 
    <input type="radio" name="group-two" value="banana"> 
 
    <label for=""> banana </label> 
 
    <input type="radio" name="group-two" value="apple"> 
 
    <label for=""> apple </label> 
 
<br> 
 

 
    <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
    </select> 
 
</div>