在 php 循环中单击复选框时将 1 添加到输入值

Question

我想在选中复选框时为输入值添加 +1。我已经尝试过这段代码，但在 a 循环内不起作用。我需要在 php 循环中进行这项工作，因此，只需要在连接的输入上工作。

这是我的代码

<div class="mix ">

        <div class="img-card">
          <img src="<?= $product->image_card ?>">
        </div>
        <p><?= $product->sub_title; ?></p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-<?= $product->sub_title ?>" id="<?= $product->sub_title ?>" value="SI" />
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-<?= $product->sub_title ?>" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          </div>
        </div>

给我这个html：

<div class="mix">

        <div class="img-card">
          <img src="...">
        </div>
        <p>P Name</p>
        <div class="azione">
          <p>
            Check
            <input type="checkbox" name="PRD-name" id="P-ID" value="SI">
          </p>
            <div class="quantity-form">
              <span class="input-holder-form"><span class="tiny-button-form plus">+</span><span class="tiny-button-form plus">+</span>
                  <input class="contatore" type="number" min="0" name="QNT-NIA - front desk" value="0">
              <span class="tiny-button-form minus"><strong>–</strong></span>
          <span class="tiny-button-form minus"><strong>–</strong></span></span></div>
        </div>
      </div>

这是我的 jQuery

$('input:checkbox').change(function(){
    if($(this).is(":checked")) {
        $(this).closest('.mix').addClass("checked");
        var $input = $('.mix.checked .contatore');
        var num = parseInt($input.val());
        var newNum = num + 1;
        $input.val(newNum);
    } else {
        $(this).closest('.mix').removeClass("checked");
        var $input = $('.mix .contatore');
        var num = parseInt($input.val());
        var newNum = num * 0;
        $input.val(newNum);
    }
});

当我单击复选框时，将输入数字加 1，当我单击复选框时，将归零。

但是如何让它只在连接的盒子上工作而不是在所有盒子上工作呢？

可能不必使用class checked，但我已经尝试使用closest、find、children 或parent。

Answer 1

假设您有多组重复元素，位置选择器可以工作。

您的代码中的问题具体是这一行：

var $input = $('.mix.checked .contatore');

该行忽略位置，并且应该只查看具有该类的 closest 元素，就像您查看该类上方的行一样。

此外，您在函数中重新声明了相同的变量。没必要那样做。我稍微清理了代码并修复了位置选择器。

您的示例代码中还缺少结束 </span> 并且您发布的集合不超过 1 个，因此我必须自己制作重复集合，希望尽可能与您的匹配。

下面的代码分别处理每个集合，仅将 +1 添加到与同一集合中的复选框匹配的输入，而不是对所有输入添加 +1。

$('input:checkbox').change(function() {
  var $closestParent = $(this).closest('.mix'),
    $input = $closestParent.find('.contatore'),
    num = parseInt($input.val()),
    newNum

  if ($(this).is(":checked")) {
    $closestParent.addClass("checked");
    newNum = num + 1;
  } else {
    $closestParent.removeClass("checked");
    newNum = num * 0;
  }
  
  $input.val(newNum);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>

Answer 2

这就是我在上面的评论中所说的。使用 id 和属性 data-id 来触发和选择正确的字段。使用递增的 id 并将其作为 data-id，这样您仍然可以在循环中使用计数器。

$('input:checkbox').change(function() {
  var idVal = $(this).data('id');
  var inputVal = parseInt($('#input_'+idVal).val());
  if ($(this).is(":checked")) {
    inputVal+=1;
    $('#input_'+idVal).val(inputVal);
  } else {

    $('#input_'+idVal).val(0);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct1" id="someId1" value="SI" data-id="1"/>
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_1" type="number" min="0" name="someName1" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>
<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct2" id="someId2" data-id="2" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_2" type="number" min="0" name="someName2" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>

<div class="mix ">

  <div class="img-card">
    <img src="http://via.placeholder.com/15x15">
  </div>
  <p>
    Some Product Title
  </p>
  <div class="azione">
    <p>
      Check
      <input type="checkbox" name="someProduct3" id="someId3" data-id="3" value="SI" />
    </p>
    <div class="quantity-form">
      <span class="input-holder-form"><span class="tiny-button-form plus">+</span>
      <input class="contatore" id="input_3" type="number" min="0" name="someName3" value="0">
      <span class="tiny-button-form minus"><strong>–</strong></span></span>
    </div>
  </div>
</div>