如何通過jQuery獲取字段集中的選定單選按鈕值？

Question

我有兩個單選按鈕包裝在一個字段集中。 我想獲取單擊時字段集內單擊的單選按鈕的值。

HTML：

<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" />


</fieldset>

jQuery的：

$('#skin-complexion').on('change', function() {

  var value = $(this).val();
  alert(value);      

});

我上面的jQuery代碼無法正常工作。 任何幫助表示贊賞。

Answer 1

你必須使用radio作為選擇也因為你正在改變單選按鈕

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  alert(value);      
});

工作片段：-

 $('#skin-complexion input:radio').on('change', function() { var value = $(this).val(); console.log(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="skin-complexion" name="properties[skin_complexion]"> <img src="{{ 'icon-fair.png' | asset_url }}"> <input type="radio" value="Fair" /> Fair <img src="{{ 'icon-medium.png' | asset_url }}"> Medium <input type="radio" value="Medium" /> </fieldset> 

注意：-如果您希望一次只能檢查一個單選按鈕，則可以向它們添加通用name屬性

 $('#skin-complexion input:radio').on('change', function() { var value = $(this).val(); console.log(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="skin-complexion" name="properties[skin_complexion]"> <img src="{{ 'icon-fair.png' | asset_url }}"> <input type="radio" name="radio_example" value="Fair" /> Fair <img src="{{ 'icon-medium.png' | asset_url }}"> Medium <input type="radio" name="radio_example" value="Medium" /> </fieldset> 

Answer 2

嘗試$('#skin-complexion > input[type=radio]') 。

您還應該為單選按鈕設置一個通用name屬性，以便一次只能選擇一個單選按鈕：

 $('#skin-complexion > input[type=radio]').on('change', function() { var value = $(this).val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="skin-complexion" name="properties[skin_complexion]"> <img src="{{ 'icon-fair.png' | asset_url }}"> <input type="radio" name="level" value="Fair" /> Fair <img src="{{ 'icon-medium.png' | asset_url }}"> Medium <input type="radio" name="level" value="Medium" /> </fieldset> 

Answer 3

您需要將名稱放在單選按鈕上，否則可以同時選擇兩個單選按鈕。 如果用戶可以同時選擇兩個單選按鈕，則可以嘗試以下代碼

$("#skin-complexion input[type='radio']").click(function(){
    console.log($(this).val());
});

如果用戶可以同時選擇一個單選按鈕，則需要將名稱添加到單選按鈕中，如下所示：

<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" name="type1" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" name="type1" />


</fieldset>

並使用以下腳本獲取選中的單選按鈕值：

$("#skin-complexion input[type='radio']").click(function(){
    console.log($(this).val());
});

希望這可以幫助！

Answer 4

我建議您了解Jquery中的attribute ： https ://api.jquery.com/attribute-equals-selector/

 $('#skin-complexion input[type="radio"]').on('change', function() { var value = $(this).val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="skin-complexion" name="properties[skin_complexion]"> <img src="{{ 'icon-fair.png' | asset_url }}"> <input type="radio" value="Fair" /> Fair <img src="{{ 'icon-medium.png' | asset_url }}"> Medium <input type="radio" value="Medium" /> </fieldset> 

Answer 5

如果它們屬於同一組，則應將name屬性賦予單選按鈕。 然后，您可以選擇單擊值並發出警報。

 $('input[type=radio][name=myRadios]').on('change', function() { var value = $(this).val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset id="skin-complexion" name="properties[skin_complexion]"> <img src="{{ 'icon-fair.png' | asset_url }}"> <input type="radio" value="Fair" name="myRadios" /> Fair <img src="{{ 'icon-medium.png' | asset_url }}"> Medium <input type="radio" value="Medium" name="myRadios"/> </fieldset>