如何使用JS和Symfony获取无线电类型的值

Question

我有表单并尝试使用JS获取input type = radio的值 我的表格看起来像这样：

<div class="col-xs-12 col-lg-12 margin-top-10">
   <label><i class="fa fa-caret-right"></i> Choisir le modèle :</label>
   <div class="radio-list">
      <div id="ete_reservation_settings_mode_product">
         <input type="radio" id="ete_reservation_settings_mode_product_0" name="ete_reservation_settings[mode_product]" required="required" value="1">
         <label for="ete_reservation_settings_mode_product_0" class="required">Mono Produit</label><input type="radio" id="ete_reservation_settings_mode_product_1" name="ete_reservation_settings[mode_product]" required="required" value="2" checked="checked">
         <label for="ete_reservation_settings_mode_product_1" class="required">Multi Produit</label>
      </div>
   </div>
</div>

到目前为止，我已经尝试了

$("input[name*=ete_reservation_settings_mode_product").change(function() { 
    alert($(this).val()); 
});

和

$("#ete_reservation_settings_mode_product").change(function() { 
    $("input[name=ete_reservation_settings[mode_product]").change(function() { 
        alert($(this).val()); 
    });
});

Answer 1

我认为“在变化中”你要么想要

1. 所选输入值，即值=“1”或值=“2”
2. 所选输入的ID ，即“ete_reservation_settings_mode_product_0”或“ete_reservation_settings_mode_product_1”
3. 所选输入的标签文字，即“Mono Produit”或“Multi Produit”

使用Jquery（$）和更改函数，我们可以这样做：

var containerSelector = '#ete_reservation_settings_mode_product';

$(containerSelector + ' input').change(function() {

  var valueOfSelectedInput = $(this).val();
  var selectedInput = $(containerSelector).find('input[value="' + valueOfSelectedInput + '"]');
  var selectedInputId = selectedInput.attr('id');
  var correspondingLabel = $(containerSelector + ' label[for="' + selectedInputId + '"]');
  var correspondingLabelText = correspondingLabel.text();

  // outputs: '1' or '2'
  console.log(valueOfSelectedInput);

  //outputs 'ete_reservation_settings_mode_product_0' or 'ete_reservation_settings_mode_product_1'
  console.log(selectedInputId);

  //outputs 'Mono Produit' or 'Multi Produit'
  console.log(correspondingLabelText);

});

请注意我使用了 console.log而非警告。打开浏览器的控制台以查看这些内容。如果你不知道它在哪里，只需搜索“如何在X中找到控制台（例如chrome，safari，firefox，explorer）浏览器？”

在https://jsfiddle.net/2f1qmfv4/

上查看工作小提琴

Answer 2

试

$("input[name=ete_reservation_settings\\\[mode_product\\\]]").change(function() { 
    alert($(this).val()); 
});

或

$("input[type=radio]").change(function() { 
    alert($(this).val()); 
});