JQuery：如何通過點擊提交按鈕「選擇」單選按鈕？

Question

我是JQuery中的新手，我需要通過單擊此表中的提交按鈕來選擇單選按鈕，就在JQuery回發函數之前。

我很抱歉，我的代碼專門JQuery的是太多的混亂和業餘愛好者。

<script type="text/javascript"><!-- 
$('.button-cart').on('click', function() { 
    btn_id = $(this).attr('id'); 
    qty_id = '#input-quantity' + btn_id.replace('button-cart', ''); 
    input_qty_val = $(qty_id); 
    $('#input-quantity').val(input_qty_val.val()); 

    radio_id = $(this).closest('input[type=radio]').attr('id'); 
    alert(radio_id); 

    $.ajax({ 
     url: 'index.php?route=checkout/cart/add', 
     type: 'post', 
     data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'), 
     dataType: 'json' 
    }); 
}); 
//--></script> 

提交按鈕和無線電輸入在不同的單元格中。

<table> 
    <tbody> 
     <tr> 
      <td><div class="radio"> 
        <label> 
         <input type="radio" id="option-229-26" name="option[229]" value="26"> 
         70B </label> 
       </div></td> 
      <td> 12 </td> 
      <td><input type="text" name="quantity" value="1" size="2" id="input-quantity-229-26" class="qty form-control"></td> 
      <td><button type="button" id="button-cart-229-26" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
     </tr> 
     <tr> 
      <td><div class="radio"> 
        <label> 
         <input type="radio" id="option-229-27" name="option[229]" value="27"> 
         75B </label> 
       </div></td> 
      <td> 12 </td> 
      <td><input type="text" name="quantity" value="1" size="2" id="input-quantity-229-27" class="qty form-control" autocomplete="off"></td> 
      <td><button type="button" id="button-cart-229-27" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
     </tr> 
    </tbody> 
</table> 
<input type="hidden" name="quantity" id="input-quantity" value="3"> 

Answer 1

從JQuery的角度來看，該代碼似乎並沒有那麼亂，但我建議你更改HTML結構。通過部分ID匹配輸入組需要腳本進行替換和連接以收集輸入。使用數據屬性，腳本可以更輕鬆地收集值。

例如，您可以用data-input-group="chart-group-<id>"或您選擇的任何屬性標記屬於一個組的輸入。那麼所有合適的輸入都可以從JQuery中簡單選擇：

$('input[type="radio"][data-input-group="chart-group-<id>"]'); 

...等等。

$('.button-cart').on('click', function() { 
 
    group_id = $(this).data('input-group'); 
 
    $('#input-quantity').val(
 
    $('input[name=quantity][data-input-group=' + group_id + ']').val() 
 
); 
 

 
    $('input[type=radio][data-input-group=' + group_id + ']').prop("checked", true); 
 

 
    // and perform ajax request 
 
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="radio"> 
 
      <label> 
 
         <input type="radio" data-input-group="chart-group-229" value="26"> 
 
         70B </label> 
 
     </div> 
 
     </td> 
 
     <td> 12 </td> 
 
     <td><input type="text" name="quantity" value="1" size="2" data-input-group="chart-group-229" class="qty form-control"></td> 
 
     <td><button type="button" data-input-group="chart-group-229" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
     <td> 
 
     <div class="radio"> 
 
      <label> 
 
         <input type="radio" data-input-group="chart-group-239" value="26"> 
 
         70B </label> 
 
     </div> 
 
     </td> 
 
     <td> 12 </td> 
 
     <td><input type="text" name="quantity" value="21" size="2" data-input-group="chart-group-239" class="qty form-control"></td> 
 
     <td><button type="button" data-input-group="chart-group-239" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
    </tr> 
 

 
    </tbody> 
 
</table> 
 
<input type="hidden" name="quantity" id="input-quantity" value="3">

Answer 2

是這樣的嗎？

說明：

我註釋掉ajax因爲我不使用它，然後我訪問使用.parents()功能父tr中，我發現（.find()），其中有複選框輸入（） ，最後我使用.prop()函數將屬性checked設置爲true。

$('.button-cart').on('click', function() { 
 
    btn_id = $(this).attr('id'); 
 
    qty_id = '#input-quantity' + btn_id.replace('button-cart', ''); 
 
    input_qty_val = $(qty_id); 
 
    $('#input-quantity').val(input_qty_val.val()); 
 

 
    radio_id = $(this).parents("tr").find("input:radio"); 
 
    radio_id.prop("checked", true); 
 

 
    /*$.ajax({ 
 
    url: 'index.php?route=checkout/cart/add', 
 
    type: 'post', 
 
    data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'), 
 
    dataType: 'json' 
 
    });*/ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>Size</th> 
 
     <th>Price</th> 
 
     <th>Qty</th> 
 
     <th></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="radio"> 
 
      <label> 
 
         <input type="radio" name="option[229]" value="27"> 
 
         75B </label> 
 
     </div> 
 
     </td> 
 
     <td> 12 </td> 
 
     <td><input type="text" name="quantity" value="1" size="2" id="input-quantity-229-27" class="qty form-control"></td> 
 
     <td><button type="button" id="button-cart-229-27" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <div class="radio"> 
 
      <label> 
 
         <input type="radio" name="option[229]" value="28"> 
 
         80B </label> 
 
     </div> 
 
     </td> 
 
     <td> 12 </td> 
 
     <td><input type="text" name="quantity" value="1" size="2" id="input-quantity-229-28" class="qty form-control"></td> 
 
     <td><button type="button" id="button-cart-229-28" data-loading-text="Loading..." class="button-cart btn btn-primary btn-lg btn-block"><i class="fa fa-cart-plus" aria-hidden="true"></i></button></td> 
 
    </tr> 
 
    <input type="hidden" name="quantity" id="input-quantity" value="3"> 
 
    </tbody> 
 
</table>