在jquery和ajax中处理单选按钮值和文本

Question

我正在尝试获取单选按钮的文本，并将其设置为的文本。此外，我想在ajax中传递单选按钮的值。

这是模板：

<div id="div_id_feature_selection" class="form-group">
<label for="id_feature_selection_0" class=" requiredField">
Feature selection<span class="asteriskField">*</span>
</label>
<div class="">
<div class="form-check">
<input type="radio" class="form-check-input" name="radio_selection" id="id_radio_selection_1" value="rdoSel1" >
<label for="id_radio_selection_1" class="form-check-label">
Radio Selection 1
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="radio_selection" id="id_radio_selection_2" value="rdoSel2" >
<label for="id_radio_selection_2" class="form-check-label">
Radio Selection 2
</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" name="radio_selection" id="id_radio_selection_3" value="rdoSel3" >
<label for="id_radio_selection_3" class="form-check-label">
Radio Selection 3
</label>
</div>
</div>
</div>

这是所选单选按钮文本应复制到的位置

<h6 id="rdo_text_copy">None </h6>

传递所选单选按钮值的ajax调用

$("input[type='radio]").click(function(){
var rdo_option = $("input[name='radio_selection']:checked").val(),
rdo_option_name = $("input[name='radio_selection']:checked").text();
if(rdo_option){
sel_option=rdo_option;
$("#rdo_text_copy").text(rdo_option_name);
}
});
$("#btnSelect").click(function(){
...
$.ajax({
...
data: {
...
sel_option_value: sel_option,
},
success: function(response){
...
}
});
});

我试图将以下代码放在顶部，但只检索到第一个单选按钮的值。如果顶部没有这一行，则单击事件将不起作用。

sel_technique = $("input[name='feature_selection']:checked").val();

Answer 1

首先，您提到您正在尝试使用引用feature_selection的代码，但该代码在HTML中不存在。

您可以使用next来获取radio之后的标签，而不是干扰收音机的text，因为这是HTML的模式。

$("input[name='radio_selection']").change(function(){
$("#rdo_text_copy").text($("input[name='radio_selection']:checked").next("label").text());
});