选择页面上的任意单选按钮

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与.options类和所有的表单元素都在其中。我只想要一个变量中单选按钮的值。

​

$(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>

​