使用javascript

Question

我已阅读多个主题，但没有一个专门针对我的问题。我有一个表作为下拉列表。 （是的，必须这样）

＆＃13;

＆＃13;

var blocka = "test1"
$('#john').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var tx = document.getElementById('james').innerHTML;
    $('.variant_title').text(tx);
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var rx = document.getElementById('matt').innerhtml;
    $('.variant_price').text(rx);
  } else {
    this.setAttribute("checked", ""); // For IE
    this.removeAttribute("checked"); // For other browsers
    this.checked = false;
    $('.variant_title').empty();
    $('.variant_price').empty();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
     important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
  <div class="variant_price"></div>
</table>

＆＃13;

＆＃13;

＆＃13;

我用来获取＆＃39; james＆＃39;的价值的代码正在为第一个复选框输入工作。但是，当我取消选中输入并尝试检查新输入时，我没有显示variant_title的值。

如何让它比第一次迭代更有效？

Answer 1

id在HTML中必须是唯一的，它只会获得第一场比赛，这就是为什么它只适用于第一场比赛。

要做的第一件事是，如果您确实需要使用ID，请使用id="john1"，id="john2"等等。

$('input[id^=john]')将获得所有带有john（属性选择器）的id的输入，因此将选择所有john1 john2。

然后将tx rx设置为＆＃39;＆＃39;首先，然后找到所有选中的复选框：

  $('.picker input[type=checkbox]:checked').each(function() {
    var parentTr = $(this).parent().parent();
    tx += '<br>' + parentTr.find('.james').text();
    rx += '<br>' + parentTr.find('.matt').text();
  });

由于复选框是tr的孙子，td $(this).parent().parent();的子将获得祖父母tr，然后使用find('.james')你可以在这个tr块中找到名为james的类。

构建字符串，最后输出为html（）

＆＃13;

＆＃13;

var blocka = "test1";
$('input[id^=john]').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  var tx = '';
  var rx = '';
  $('.picker input[type=checkbox]:checked').each(function() {
    var parentTr = $(this).parent().parent();
    tx += '<br>' + parentTr.find('.james').text();
    rx += '<br>' + parentTr.find('.matt').text();
  });
  $('.variant_title').html(tx);
  $('.variant_price').html(rx);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
     important;min-height:1.20em;">
      <td>
        <input id="john1" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td>
        <input id="john2" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
    important;min-height:1.20em;">
      <td>
        <input id="john3" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span class="matt">$0.01</span></td>
      <td class="james hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
</table>
<div class="variant_price"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是您多次使用相同的id。 id必须是唯一的，这使得它们不适合您使用它们的内容。当你执行document.getElementById('james') #james时，你期望得到它？当多个元素具有相同的“类型”时，请使用class，而不是id。

除此之外，james，john和matt无效id。 id和类名应该是描述性的。在下面的代码段中，我将<span id="matt">替换为<span class="price">，将<td id="james">替换为<td class="title">。

在下面的代码中，选中复选框后，我使用jQuery的closest函数获取复选框的行，find获取.title和.price同一行。 （我还简化了标记和逻辑以使其更清晰;您需要将其与您拥有的内容集成。）

由于您没有指定，因此在选中第二个复选框的代码段中，它只会替换上一次检查的输出。

var $variantTitle = $('.variant_title');
var $variantPrice = $('.variant_price');

$('#products :checkbox').on('change', function() {
  if (this.checked) {
    var $row = $(this).closest('tr');
    var title = $row.find('.title').text();
    var price = $row.find('.price').text();
    $variantTitle.text(title);
    $variantPrice.text(price);
  } else {
    $variantTitle.empty();
    $variantPrice.empty();
  }
});

body{font-size:.75rem}
.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
  <tbody>
    <tr>
      <td>
        <span class="variant_title"></span>
      </td>
    </tr>
    <tr>
      <td><input name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
</table>

<div class="variant_price"></div>