Получить значение из начальной загрузки данных тумблер = «кнопка» на клик

Question

У меня возникли проблемы с получением значения выбранной радиокнопки с начальной загрузки кнопки группы

<form action="cart.php" method="post" id="addtocart"> 
    <div id="select1" class="product-options " data-toggle="buttons"> 
     <label class="btn btn-default"><input type="radio" name="option1" value="1"> 1 </label> 
     <label class="btn btn-default"><input type="radio" name="option1" value="2"> 2 </label> 
     <label class="btn btn-default"><input type="radio" name="option1" value="3"> 3 </label> 
    </div> 
</form> 

Upon выбор делается, мне нужно получить выбранное значение. Я понимаю, что я должен быть в состоянии получить значение следующим образом:

$("#select1").click(function() { 
    var option1 = $("#select1 label.active input").val(); 
}); 

или альтернативно

$("#select1").click(function() { 
    var option1 = $("#select1 input:radio:checked").val(); 
}); 

Однако оба варианта на первое возвращение клик «undefinied» и на втором нажмите возвращает значение, которое было выбрано " до". Как я могу получить выбранное значение при первом нажатии?

Answer 1

Вам необходимо подключиться к событию change, а не к click родителя div. Попробуйте это:

$("#select1 input:radio").change(function() { 
    var optionValue = $(this).val(); 
    console.log(optionValue); 
}); 

Working example

Answer 2

Выбранное значение может быть получено: $("#select1 input:radio:checked").first().val();

Обратите внимание на .first() добавления.