0
我們在我們網站上有一個窗體（例如T-Shirt），根據您選擇的單選按鈕進行更改。我寫了一個JS功能，將移動下拉和桌面單選按鈕配對。儘管視覺效果都很好，但添加到購物車功能只適用於臺式機，而不適用於手機。單選按鈕在Javascript中不改變形式
當我通過diffchecker運行表單時，我注意到唯一改變的行數是顯示的價格和<input type="hidden" name="variation_id" class="variation_id">的value。
目前下拉增加了checked到相應的單選按鈕，它適用於顯示目的attr，但我學到的形式並不真正關心的單選按鈕是否是checked。
我不確定窗體正在尋找什麼。我試過將click()傳遞給收音機input及其label。我甚至嘗試將.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="[{"attributes":{"attribute_size":"Extra Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"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","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":652,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1},{"attributes":{"attribute_size":"Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"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","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":653,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1}]" current-image="5823">
\t
\t \t \t <table class="variations" cellspacing="0">
\t \t \t <tbody>
\t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="label"><label for="size">Size</label></td>
\t \t \t \t \t \t \t \t \t \t \t \t <td class="value">
\t \t \t \t \t \t \t <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&variation_id=655&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&variation_id=654&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&variation_id=653&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&variation_id=652&attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#">Clear</a> \t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t \t \t </tbody>
\t \t <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>
\t \t
\t \t <div class="single_variation_wrap">
\t \t \t <div class="woocommerce-variation single_variation" style="">
\t <div class="woocommerce-variation-description">
\t \t
\t </div>
\t <div class="woocommerce-variation-price">
\t \t
\t </div>
\t <div class="woocommerce-variation-availability">
\t \t <p class="stock in-stock">In stock</p>
\t </div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
\t
<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> \t <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
\t <input type="hidden" name="add-to-cart" value="651">
\t <input type="hidden" name="product_id" value="651">
\t <input type="hidden" name="variation_id" class="variation_id" value="653">
</div>
\t \t </div>
\t \t \t
\t </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="[{"attributes":{"attribute_size":"Extra Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"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","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":652,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1},{"attributes":{"attribute_size":"Large"},"availability_html":"<p class=\"stock in-stock\">In stock<\/p>\n","backorders_allowed":false,"dimensions":"N\/A","dimensions_html":"N\/A","display_price":25,"display_regular_price":25,"image":{"title":"Madcap-VNeckTee-Grid-Retina","caption":"","url":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","alt":"Madcap-VNeckTee-Grid-Retina","src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-450x431.png","srcset":"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","sizes":"(max-width: 450px) 100vw, 450px","full_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina.png","full_src_w":960,"full_src_h":920,"thumb_src":"https:\/\/madcapcoffee.com\/wp-content\/uploads\/2017\/07\/Madcap-VNeckTee-Grid-Retina-120x120.png","thumb_src_w":120,"thumb_src_h":120,"src_w":450,"src_h":431},"image_id":"5823","is_downloadable":false,"is_in_stock":true,"is_purchasable":true,"is_sold_individually":"no","is_virtual":false,"max_qty":"","min_qty":1,"price_html":"","sku":"","variation_description":"","variation_id":653,"variation_is_active":true,"variation_is_visible":true,"weight":".3 lbs","weight_html":".3 lbs","step":1,"input_value":1}]" current-image="5823">
\t
\t \t \t <table class="variations" cellspacing="0">
\t \t \t <tbody>
\t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t <td class="label"><label for="size">Size</label></td>
\t \t \t \t \t \t \t \t \t \t \t \t <td class="value">
\t \t \t \t \t \t \t <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&variation_id=655&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&variation_id=654&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&variation_id=653&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&variation_id=652&attribute_size=Extra+Large"></div></div><a class="reset_variations" href="#" style="visibility: visible; display: inline;">Clear</a> \t \t \t \t \t \t </td>
\t \t \t \t \t </tr>
\t \t \t \t \t \t \t </tbody>
\t \t <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>
\t \t
\t \t <div class="single_variation_wrap">
\t \t \t <div class="woocommerce-variation single_variation" style="">
\t <div class="woocommerce-variation-description">
\t \t
\t </div>
\t <div class="woocommerce-variation-price">
\t \t
\t </div>
\t <div class="woocommerce-variation-availability">
\t \t <p class="stock in-stock">In stock</p>
\t </div>
</div><div class="woocommerce-variation-add-to-cart variations_button woocommerce-variation-add-to-cart-enabled">
\t
<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> \t <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>
\t <input type="hidden" name="add-to-cart" value="651">
\t <input type="hidden" name="product_id" value="651">
\t <input type="hidden" name="variation_id" class="variation_id" value="652">
</div>
\t \t </div>
\t \t \t
\t </form>
</div>
[如何獲取所選單選按鈕的值？]（https://stackoverflow.com/questions/15839169/how-to-get-value-of-selected-radio-button） – jmargolisvt
您可能需要發佈你的代碼，我們無法從這個模糊的描述中判斷你做錯了什麼。 – Barmar
@jmargolisvt它也用於單選按鈕，以告訴哪一個被選中。 – Barmar