如何使用jquery获取div中当前所选单选按钮的值？

Question

我有这个标记：

<div id="filter-1" class="form-radios">

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-all" name="field_filter_1_value" value="All" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-1" name="field_filter_1_value" value="1" checked="checked" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-2" name="field_filter_1_value" value="2" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-3" name="field_filter_1_value" value="3" class="form-radio">  

	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-4" name="field_filter_1_value" value="4" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" name="field_filter_1_value" value="5" class="form-radio">
	</div>

	<div class="form-item form-radio form-item-field-filter-1-value">
	 <input type="radio" id="filter-1-value-6" name="field_filter_1_value" value="6" class="form-radio">
	</div>

</div>

<div id="filter-2" class="form-radios">

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-all" name="field_filter_1_value" value="All" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-1" name="field_filter_1_value" value="1" checked="checked" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-2" name="field_filter_1_value" value="2" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-3" name="field_filter_1_value" value="3" class="form-radio">  

	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-4" name="field_filter_1_value" value="4" class="form-radio">

	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" name="field_filter_1_value" value="5" class="form-radio">
	</div>

	<div class="form-item form-radio form-item-field-filter-2-value">
	 <input type="radio" id="filter-2-value-6" name="field_filter_1_value" value="6" class="form-radio">
	</div>

</div>

我正在尝试从主div中包含的单选按钮组中获取所选值。

我的想法是检查包含单选按钮的所有主div，然后获取所选单选按钮的值，但我的代码似乎不起作用。

这是我的JQuery：

		$(".form-radios").each(function(){
			
			var radio_val = $(this).closest('input[type="radio"]:checked').val();
			
			console.log(radio_val);		  	
			
		});	

Answer 1

你不应该使用closest()方法，因为它会在DOM上运行，而不是向下运行。您需要使用find()方法，例如：

$(this).find('input[type="radio"]:checked').val();

Answer 2

你可以这样得到它

$("input:radio[name='field_filter_1_value']:checked").val();

以下是demo，它会提醒所选单选按钮的值

您甚至可以通过在标识符

中添加输入类来使其更准确

$("input.form-radio:radio[name='field_filter_1_value']:checked").val();