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，因为我没有使用它，然后我使用tr函数访问父.parents()，我找到（.find()）输入它有复选框（input:checkbox），最后我使用checked函数将属性.prop()设置为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>

JQuery：单击提交按钮如何“选择”单选按钮？

2 个答案: