单选按钮不会更改Javascript中的表单

Question

我们的网站上有一张表格(例如T-Shirt)，它会根据您选择的单选按钮而变化。我编写了一个JS函数，将移动设备下拉按钮和桌面单选按钮配对。虽然视觉上一切正常，但添加到购物车功能只适用于桌面，而不适用于移动设备。

当我通过一个差异检查器运行表单时，我注意到唯一变化的行是显示的价格和<input type="hidden" name="variation_id" class="variation_id">的value。

目前，下拉菜单将checked的attr添加到相应的单选按钮中，这用于显示目的，但我了解到该表单实际上并不关心单选按钮是否为checked。

我不确定表单要查找的是什么。我试着向电台的input和它的label传递一个click()。我甚至尝试手动将.variation_id从652更改为653。但一切都没变。表单未处理。

JS在单选按钮中查找的属性是否在标记中看不到？

下面是一个选择了一个选项的表单：

​

<div class="av-woo-purchase-button  avia-builder-el-16  el_after_av_hr  avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Extra Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:652,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1},{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:653,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1}]" current-image="5823">
	
			<table class="variations" cellspacing="0">
			<tbody>
									<tr>
						<td class="label"><label for="size">Size</label></td>
												<td class="value">
							<div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=655&amp;attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=654&amp;attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=653&amp;attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=652&amp;attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#">Clear</a>						</td>
					</tr>
							</tbody>
		<div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>

		
		<div class="single_variation_wrap">
			<div class="woocommerce-variation single_variation" style="">
	<div class="woocommerce-variation-description">
		
	</div>

	<div class="woocommerce-variation-price">
		
	</div>

	<div class="woocommerce-variation-availability">
		<p class="stock in-stock">In stock</p>

	</div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
	
    <div class="quantity_select" style="float: left;">
        <select name="quantity" class="qty" title="Qantity">
                            <option selected="selected" value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                    </select>
    </div>	<button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
	<input type="hidden" name="add-to-cart" value="651">
	<input type="hidden" name="product_id" value="651">
	<input type="hidden" name="variation_id" class="variation_id" value="653">
</div>
		</div>

			
	</form>

</div>

​

下面是选择了另一个选项的相同表单：

​

<div class="av-woo-purchase-button  avia-builder-el-16  el_after_av_hr  avia-builder-el-last "><p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>25.00</span></p>
<form class="variations_form cart" method="post" enctype="multipart/form-data" data-product_id="651" data-product_variations="[{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Extra Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:652,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1},{&quot;attributes&quot;:{&quot;attribute_size&quot;:&quot;Large&quot;},&quot;availability_html&quot;:&quot;<p class=\&quot;stock in-stock\&quot;>In stock<\/p>\n&quot;,&quot;backorders_allowed&quot;:false,&quot;dimensions&quot;:&quot;N\/A&quot;,&quot;dimensions_html&quot;:&quot;N\/A&quot;,&quot;display_price&quot;:25,&quot;display_regular_price&quot;:25,&quot;image&quot;:{&quot;title&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;caption&quot;:&quot;&quot;,&quot;url&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;alt&quot;:&quot;Madcap-VNeckTee-Grid-Retina&quot;,&quot;src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png&quot;,&quot;srcset&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png 450w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-300x288.png 300w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-768x736.png 768w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-505x484.png 505w, https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png 960w&quot;,&quot;sizes&quot;:&quot;(max-width: 450px) 100vw, 450px&quot;,&quot;full_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png&quot;,&quot;full_src_w&quot;:960,&quot;full_src_h&quot;:920,&quot;thumb_src&quot;:&quot;https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png&quot;,&quot;thumb_src_w&quot;:120,&quot;thumb_src_h&quot;:120,&quot;src_w&quot;:450,&quot;src_h&quot;:431},&quot;image_id&quot;:&quot;5823&quot;,&quot;is_downloadable&quot;:false,&quot;is_in_stock&quot;:true,&quot;is_purchasable&quot;:true,&quot;is_sold_individually&quot;:&quot;no&quot;,&quot;is_virtual&quot;:false,&quot;max_qty&quot;:&quot;&quot;,&quot;min_qty&quot;:1,&quot;price_html&quot;:&quot;&quot;,&quot;sku&quot;:&quot;&quot;,&quot;variation_description&quot;:&quot;&quot;,&quot;variation_id&quot;:653,&quot;variation_is_active&quot;:true,&quot;variation_is_visible&quot;:true,&quot;weight&quot;:&quot;.3 lbs&quot;,&quot;weight_html&quot;:&quot;.3 lbs&quot;,&quot;step&quot;:1,&quot;input_value&quot;:1}]" current-image="5823">
	
			<table class="variations" cellspacing="0">
			<tbody>
									<tr>
						<td class="label"><label for="size">Size</label></td>
												<td class="value">
							<div class="desktop-only" id="radio"><div><input type="radio" name="attribute_size" value="Small" id="size_v_Small" disabled="disabled"><label for="size_v_Small">Small</label><input type="hidden" name="radio_variation_id" value="655"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=655&amp;attribute_size=Small"></div><div><input type="radio" name="attribute_size" value="Medium" id="size_v_Medium" disabled="disabled"><label for="size_v_Medium">Medium</label><input type="hidden" name="radio_variation_id" value="654"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=654&amp;attribute_size=Medium"></div><div><input type="radio" name="attribute_size" value="Large" id="size_v_Large" checked="checked"><label for="size_v_Large">Large</label><input type="hidden" name="radio_variation_id" value="653"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=653&amp;attribute_size=Large"></div><div><input type="radio" name="attribute_size" value="Extra Large" id="size_v_Extra Large"><label for="size_v_Extra Large">Extra Large</label><input type="hidden" name="radio_variation_id" value="652"><input type="hidden" class="add-to-cart-url" value="https://madcapcoffee.com/?add-to-cart=651&amp;variation_id=652&amp;attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Clear</a>						</td>
					</tr>
							</tbody>
		<div class="mobile-only" id="drop"><select id="size"><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select></div></table>

		
		<div class="single_variation_wrap">
			<div class="woocommerce-variation single_variation" style="">
	<div class="woocommerce-variation-description">
		
	</div>

	<div class="woocommerce-variation-price">
		
	</div>

	<div class="woocommerce-variation-availability">
		<p class="stock in-stock">In stock</p>

	</div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
	
    <div class="quantity_select" style="float: left;">
        <select name="quantity" class="qty" title="Qantity">
                            <option selected="selected" value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                    </select>
    </div>	<button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
	<input type="hidden" name="add-to-cart" value="651">
	<input type="hidden" name="product_id" value="651">
	<input type="hidden" name="variation_id" class="variation_id" value="652">
</div>
		</div>

			
	</form>

</div>

​

Answer 1

因为单击其.val()与所选选项的.text()匹配的单选输入，所以我只将该选项的.click()传递给了与其匹配的单选按钮。