Question

我有2个单选按钮包裹在字段集中。我希望在单击字段集时获取单击单选按钮的值。

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/

＆＃13;

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

＆＃13;

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

＆＃13;

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>

如何通过jQuery获取字段集中的选定单选按钮值？

5 个答案: